水平对齐多个div（CSS）[重复]

Question

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

我曾经通过使 4 个蓝色 divs 的宽度 + 它们的左右边距 = 100% 来实现这一点，但在这种情况下似乎效果不佳。

我还尝试在包含所有蓝色divs 的红色中添加另一个div 并给它margin: 0 auto，但这也不起作用。

Code in jsfiddle (updated)

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