Html 水平对齐多个 div (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28631005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
horizontally aligning multiple divs (CSS)
提问by FranLegon
I need to align these divs so that the space between "content1" and the red divequals the space between "content4" and the red div. I don't mind changing the blue-div's margin but this should work for any width.
我需要对齐这些divs 以便div“content1”和红色之间的空间等于“content4”和红色之间的空间div。我不介意改变 blue-div的边距，但这应该适用于任何宽度。
I used to achieve this by making the width of the 4 blue divs + their left and right margins = 100%but that doesn't seem to work well in this case.
我曾经通过使4 个蓝色divs的宽度+ 它们的左右边距 = 100%来实现这一点，但在这种情况下似乎效果不佳。
I also tried adding another divinside the red one that contained all the blue divs and giving it margin: 0 autobut that's not working either.
我还尝试div在包含所有蓝色divs的红色内部添加另一个并提供它，margin: 0 auto但这也不起作用。
PS: if i'm not clear enough, please feel free to edit my question.
PS：如果我不够清楚，请随时编辑我的问题。
回答by Pik_at
You can use the incredible property box-sizing: border-box; supported by all modern browser, IE8 included! And set the width and margin on % :
您可以使用令人难以置信的属性 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
}
回答by raju
Hmmm, its quite easy. Check this out
嗯，这很容易。看一下这个
HTML
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
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;
}
摆弄这个。
回答by emmanuel
Your calculation is wrong: (20% * 4) + (1% * 4) = 88%.
你的计算是错误的：(20% * 4) + (1% * 4) = 88%。
You have to set top / left margin to 4% so width will be: 80% + (5 * 4%) = 100%.
您必须将顶部/左边距设置为 4%，因此宽度将为：80% + (5 * 4%) = 100%。
Added also font-size: 0to correct inline-blockproblem with white spacing.
还添加font-size: 0了纠正inline-block白色间距的问题。
.blue {
margin: 4% 0 0 4%;
}
Fiddle: http://jsfiddle.net/L7qpgdkk/1/
小提琴：http: //jsfiddle.net/L7qpgdkk/1/
Reference: Fighting the Space Between Inline Block Elements
参考资料：争取内联块元素之间的空间
