本文翻译自：Fluid width with equally spaced DIVs
I have a fluid width container DIV. 我有一个流体宽度的容器DIV。
Within this I have 4 DIVs all 300px x 250px... 在这个我有4个DIV所有300px x 250px ...
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
What I want to happen is box 1 to be floated left, box 4 to be floated right and box 2 and 3 to be spaced evenly between them. 我想要发生的是箱子1向左浮动，箱子4向右浮动，箱子2和3在它们之间均匀间隔。 I want the spacing to be fluid as well so as the browser is made smaller the space becomes smaller also. 我希望间距也是流畅的，因此随着浏览器变小，空间也变小。
#1楼
参考：https://stackoom.com/question/Snww/流体宽度等间距DIV
#2楼
If css3 is an option, this can be done using the css calc() function. 如果css3是一个选项，可以使用css calc()函数完成。
Case 1: Justifying boxes on a single line ( FIDDLE ) 案例1：在单行上对齐方框（ FIDDLE ）
Markup is simple - a bunch of divs with some container element. 标记很简单 - 一堆带有一些容器元素的div。
CSS looks like this: CSS看起来像这样：
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
where -1px to fix an IE9+ calc/rounding bug - see here 其中-1px来修复IE9 +计算/舍入错误 - 请参阅此处
Case 2: Justifying boxes on multiple lines ( FIDDLE ) 案例2：在多行上对齐方框（ FIDDLE ）
Here, in addition to the calc() function, media queries are necessary. 这里，除了calc()函数之外，还需要media queries 。
The basic idea is to set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column). 基本思想是为每个#columns状态设置一个媒体查询，然后我使用calc（）来计算每个元素的边距（除了最后一列中的元素）。
This sounds like a lot of work, but if you're using LESS or SASS this can be done quite easily 这听起来像很多工作，但如果你使用LESS或SASS，这可以很容易地完成
(It can still be done with regular css, but then you'll have to do all the calculations manually, and then if you change your box width - you have to work out everything again) （它仍然可以通过常规css完成，但是你必须手动完成所有计算，然后如果你改变你的盒子宽度 - 你必须再次解决所有问题）
Below is an example using LESS: (You can copy/paste this code here to play with it, [it's also the code I used to generate the above mentioned fiddle]) 下面是一个使用LESS的例子:(您可以在此处复制/粘贴此代码以使用它，[它也是我用来生成上述小提琴的代码]）
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
So basically you first need to decide a box-width and a minimum margin that you want between the boxes. 所以基本上你首先需要在盒子之间决定你想要的盒子宽度和最小边距。
With that, you can work out how much space you need for each state. 有了它，您可以计算出每个州需要多少空间。
Then, use calc() to calcuate the right margin, and nth-child to remove the right margin from the boxes in the final column. 然后，使用calc（）计算右边距，使用nth-child从最后一列的框中删除右边距。
The advantage of this answer over the accepted answer which uses text-align:justify is that when you have more than one row of boxes - the boxes on the final row don't get 'justified' eg: If there are 2 boxes remaining on the final row - I don't want the first box to be on the left and the next one to be on the right - but rather that the boxes follow each other in order. 这个答案相对于使用text-align:justify的公认答案的优点是，当你有多行的方框时 - 最后一行的方框没有'合理'，例如：如果剩下2个方框最后一行 - 我不希望第一个框在左边，而下一个框在右边 - 而是盒子按顺序相互跟随。
Regarding browser support : This will work on IE9+,Firefox,Chrome,Safari6.0+ - (see here for more details)
However i noticed that on IE9+ there's a bit of a glitch between media query states.
关于浏览器支持 ：这将适用于IE9 +，Firefox，Chrome，Safari6.0 + - （详见此处 ）
但是我注意到在IE9 +上媒体查询状态之间存在一些小问题。
[if someone knows how to fix this i'd really like to know :) ]
<-- FIXED HERE
[如果有人知道如何解决这个我真的很想知道:)]
< - 固定在这里
#3楼
in jQuery you might target the Parent directly. 在jQuery您可以直接定位Parent。
THIS IS USEFUL IF YOU DO NOT KNOW EXACTLY HOW MANY CHILDREN WILL BE ADDED DYNAMICALLY or IF YOU JUST CAN'T FIGURE OUT THEIR NUMBER. 这是有用的，如果您不知道多少儿童将被动态添加或如果您无法计算出他们的数字。
var tWidth=0;
$('.children').each(function(i,e){
tWidth += $(e).width();
///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);
})
$('#parent').css('width',tWidth);
This will let the parent grow horizontally as the children are beng added. 这将使parent在children被添加时水平增长。
NOTE: This assumes that the '.children' have a width and Height Set 注意：这假定'.children'具有width和Height设置
Hope that Helps. 希望有助于。
#4楼
The easiest way to do this now is with a flexbox: 现在最简单的方法是使用flexbox：
http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The CSS is then simply: 那么CSS就是：
#container {
display: flex;
justify-content: space-between;
}
demo: http://jsfiddle.net/QPrk3/ 演示： http ： //jsfiddle.net/QPrk3/
However , this is currently only supported by relatively recent browsers ( http://caniuse.com/flexbox ). 但是 ，目前仅支持相对较新的浏览器（ http://caniuse.com/flexbox ）。 Also, the spec for flexbox layout has changed a few times, so it's possible to cover more browsers by additionally including an older syntax: 此外，flexbox布局的规范已经改变了几次，因此可以通过另外包括更旧的语法来覆盖更多的浏览器：
http://css-tricks.com/old-flexbox-and-new-flexbox/ http://css-tricks.com/old-flexbox-and-new-flexbox/
http://css-tricks.com/using-flexbox/ http://css-tricks.com/using-flexbox/
#5楼
If you know the number of elements per "row" and the width of the container you can use a selector to add a margin to the elements you need to cause a justified look. 如果您知道每个“行”的元素数量和容器的宽度，您可以使用选择器为元素添加边距，从而导致合理的外观。
I had rows of three divs I wanted justified so used the: 我有三行我想要合理的行，所以使用了：
.tile:nth-child(3n+2) { margin: 0 10px }
this allows the center div in each row to have a margin that forces the 1st and 3rd div to the outside edges of the container 这允许每行中的中心div具有一个边距，迫使第一和第三div到容器的外边缘
Also great for other things like borders background colors etc 也适用于边框背景颜色等其他东西
#6楼
This worked for me with 5 images in diferent sizes. 这对我来说有5个不同尺寸的图像。
- Create a container div 创建一个容器div
- An Unordered list for the images 图像的无序列表
- On css the unordened must be displayed vertically and without bullets 在css上，未加工的必须垂直显示且没有子弹
- Justify content of container div 证明容器div的内容
This works because of justify-content:space-between, and it's on a list, displayed horizontally. 这是因为proty-content：space-between，它位于列表中，水平显示。
On CSS 在CSS上
#container {
display: flex;
justify-content: space-between;
}
#container ul li{ display:inline; list-style-type:none;
}
On html 在HTML上
<div id="container">
<ul>
<li><img src="box1.png"><li>
<li><img src="box2.png"><li>
<li><img src="box3.png"><li>
<li><img src="box4.png"><li>
<li><img src="box5.png"><li>
</ul>
</div>
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
