水平对齐多个 div (CSS)

Question

我需要对齐这些 div，以便 "content1" 和红色 div 之间的 space 等于 [=35= 之间的 space ] 和红色 div。 我不介意更改蓝色-div的边距，但这应该适用于任何宽度。

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

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

Code in jsfiddle (updated)

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

Answer 1

您的计算有误：(20% * 4) + (1% * 4) = 88%。

您必须将上边距/左边距设置为 4%，这样宽度将为：80% + (5 * 4%) = 100%。

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

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

Fiddle: http://jsfiddle.net/L7qpgdkk/1/

参考：Fighting the Space Between Inline Block Elements

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

你可以使用不可思议的属性 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/

水平对齐多个 div (CSS)

horizontally aligning multiple divs (CSS)

html

css

alignment