jQuery 用 CSS 对齐 div 以填充父容器的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7051768/
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
Justify divs with CSS to fill width of parent container
提问by benhowdle89
I have a page with a container width 100% so its the entire width of the screen, i have several DIVs in a grid structure, they all have float: left on them and no set width, just a margin of 10px.
我有一个容器宽度为 100% 的页面，所以它是屏幕的整个宽度，我在网格结构中有几个 DIV，它们都有浮动：左上，没有设置宽度，只有 10px 的边距。
Is there a method, using CSS or jQuery, to have the divs fill the entire width and justify themselves to fit the gaps, so the margin changes depending the screen size.
有没有一种方法，使用 CSS 或 jQuery，让 div 填充整个宽度并证明自己适合间隙，因此边距会根据屏幕尺寸而变化。
回答by Sparky
Check out thirtydot's answer in this thread for a pure CSS/HTML solution without JavaScript that works in all browsers including IE 6.
在此线程中查看三十多点的答案，以获取适用于包括 IE 6 在内的所有浏览器的不含 JavaScript 的纯 CSS/HTML 解决方案。
Fluid width with equally spaced DIVs
http://jsfiddle.net/thirtydot/EDp8R/
http://jsfiddle.net/thirtydot/EDp8R/
HTML:
HTML：
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>?
CSS:
CSS：
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}
?
?
回答by Julian F. Weinert
Using CSS3 this is now super easy.
使用 CSS3 这现在非常容易。
UPDATE
更新
Added MS IE support (believe in it or not...). I'm not pretty sure about the FF stuff because Mozilla changed something. I have not so much time. So if someone could maybe correct me...
添加了 MS IE 支持（信不信由你...）。我不太确定 FF 的东西，因为 Mozilla 改变了一些东西。我没有那么多时间。所以如果有人可以纠正我...
UPDATE II
更新二
Moved code to snippet
将代码移至片段
.container {
border: 1px solid black;
display: -webkit-box;
-webkit-box-pack: justify;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: justify;
-moz-box-align: center;
display: -ms-flexbox;
-ms-flex-pack: justify;
-ms-flex-align: center;
display: box;
box-pack: justify;
box-align: center;
}
.child {
background-color: red;
}<div class="container">
<div class="child">
Some Content
</div>
<div class="child">
Some Content
</div>
<div class="child">
Some Content
</div>
</div>回答by natedavisolds
You can do this with CSS if specify all dimensions in percents (ie. width, margin, padding).
如果以百分比形式指定所有尺寸（即宽度、边距、填充），您可以使用 CSS 执行此操作。
Or if you want a specific margin or padding, you can use jQuery
或者如果你想要一个特定的边距或填充，你可以使用 jQuery
$(window).resize(function() {
var $columns = $('.column'),
numberOfColumns = $columns.length,
marginAndPadding = 0,
newColumnWidth = ($('#container').width() / numberOfColumns) - marginAndPadding,
newColumnWidthString = newColumnWidth.toString() + "px";
$columns.css('width', newColumnWidthString);
}).resize();
