Question

我需要对齐这些div s，以便“content1”和红色div之间的空格等于“content4”和红色div之间的空格。 我不介意更改蓝色 - div的边距，但这适用于任何宽度。

我曾经通过使4个蓝色div s的宽度+左右边距= 100％来实现这一点，但在这种情况下似乎不能很好地工作

我还尝试在包含所有蓝色div的红色内容中添加另一个div，然后将其margin: 0 auto添加，但这也不起作用。

PS：如果我不够清楚，请随时编辑我的问题。

Answer 1

你可以使用令人难以置信的属性box-sizing：border-box;所有现代浏览器支持，包括IE8！并在％：

上设置宽度和边距

.red, .blue {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.red {
    width:650px;
    height:1000px;
    background:red;
    padding: 1% 0 0 1%; // Space top and left of red
}

.blue {
    height:200px;
    width: 24%;
    background:blue;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0; // Space bottom and right of each blue
}

http://jsfiddle.net/Pik_at/L7qpgdkk/3/

Answer 2

嗯，很简单。看看这个

HTML

<div class="red">
    <div class="blue"><div>content1</div></div>
    <div class="blue"><div>content2</div></div>
    <div class="blue"><div>content3</div></div>
    <div class="blue"><div>content4</div></div>
    <div class="blue"><div>content5</div></div>
    <div class="blue"><div>content6</div></div>
</div>

CSS

.red {
    width:680px;
    height:1000px;
    background:red;
}

.blue {
    width: 25%;
    display:inline-block;
    margin-right: -4px;
    box-sizing: border-box;
    padding: 1%;
}

.blue > div {
    background:blue;
    height:200px;
}

Fiddle this

Answer 3

您的计算错误：（20％* 4）+（1％* 4）= 88％。

您必须将上/左边距设置为4％，因此宽度将为：80％+（5 * 4％）= 100％。

还添加了font-size: 0来纠正inline-block白色间距问题。

.blue {
    margin: 4% 0 0 4%;
}

小提琴：http://jsfiddle.net/L7qpgdkk/1/

参考：Fighting the Space Between Inline Block Elements

水平对齐多个div（CSS）

3 个答案: