具有等间隔DIVs的流体宽度

小开

最佳答案

看到的: http://jsfiddle.net/thirtydot/EDp8R/

这在IE6+和所有现代浏览器!中有效
我把你要求的尺寸减半了，这样更容易处理。
text-align: justify结合.stretch是处理定位的。
display:inline-block; *display:inline; zoom:1修复了IE6/7的inline-block，在这里看到的。
font-size: 0; line-height: 0修复了IE6中的一个小问题。

#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
}

<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>

多余的span (.stretch)可以用:after代替。

这个仍然工作在与上面解决方案相同的所有浏览器中。:after不能在IE6/7中工作，但他们无论如何都在使用distribute-all-lines，所以这无关紧要。

看到的: http://jsfiddle.net/thirtydot/EDp8R/3/

:after有一个小缺点:为了让最后一行在Safari中完美地工作，你必须小心HTML中的空白。

具体来说，这是行不通的:

<div id="container">
..
<div class="box3"></div>
<div class="box4"></div>
</div>

这就是:

<div id="container">
..
<div class="box3"></div>
<div class="box4"></div></div>

你可以将它用于任意数量的子__abc，而不需要通过更改为每个子boxN类添加boxN类

.box1, .box2, .box3, .box4 { ...

来

#container > div { ...

这将选择#container div的第一个子div，而不选择它下面的其他div。为了泛化背景颜色，你可以使用CSS3 n阶选择器，尽管它只在IE9+和其他现代浏览器中被支持:

.box1, .box3 { ...

就变成:

#container > div:nth-child(odd) { ...

参见here作为jsfiddle的例子。

小开

如果css3是一个选项，则可以使用css calc()函数来完成。

案例1:在单行中对齐盒子(小提琴)

标记很简单——一堆带有容器元素的div。

CSS看起来是这样的:

div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}

1 px来修复一个IE9+的calc/舍入错误-见这里<强> < / >强

案例2:在多行上对盒子进行对齐(小提琴)

在这里，除了calc()函数外，media queries也是必需的。

基本思想是为每个#columns状态设置一个媒体查询，然后使用calc()计算出每个元素的右距(除了最后一列中的元素)。

这听起来像很多工作，但如果你使用LESS或SASS，这可以很容易地完成

(它仍然可以用常规的css来完成，但是你必须手动完成所有的计算，然后如果你改变了你的盒子宽度-你必须重新计算出所有的东西)

下面是一个使用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;
}
}

所以基本上你首先需要确定一个框宽和框间的最小裕度。

这样，你就可以计算出每个状态需要多少空间。

然后，使用calc()计算右边距，并使用n -child从最后一列的方框中删除右边距。

这个答案的优势比使用text-align:justify的接受答案的优势是，当你有不止一行的盒子时——最后一行的盒子不会被“对齐”，例如:如果最后一行还有两个盒子——我不希望第一个盒子在左边，下一个盒子在右边——而是盒子按照顺序排列。

关于浏览器支持:这将工作在IE9+，Firefox,Chrome,Safari6.0+ -(参见这里<强> < / >强了解更多详细信息)~~然而，我注意到在IE9+上，媒体查询状态之间有一个小故障。[如果有人知道如何解决这个问题，我真的很想知道:)]~~ <——FIXED 在这里

小开

在jQuery中，你可以直接瞄准父对象。

如果你不知道到底有多少个孩子，这是很有用的

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);

这将使parent在添加children时水平增长。

注意:这里假设'.children'有一个width和Height集合

希望能有所帮助。

小开

现在最简单的方法是使用flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS是简单的:

#container {
display: flex;
justify-content: space-between;
}

演示:http://jsfiddle.net/QPrk3/

然而，目前只有相对较新的浏览器支持(http://caniuse.com/flexbox)。此外，flexbox布局的规范已经更改了几次，因此可以通过添加一个较旧的语法

http://css-tricks.com/using-flexbox/

小开

如果你知道每个“行”的元素数量和容器的宽度，你可以使用选择器为你需要的元素添加边缘，以形成合理的外观。

我有三排div，我想要对齐，所以使用:

.tile:nth-child(3n+2) { margin: 0 10px }

这允许每行的中心div有一个边距，将第1和第3个div强制移到容器的外边缘

也适用于其他东西，如边界、背景色等

小开

对于5张不同大小的图片，这种方法很有效。

创建一个容器div
图像的无序列表
在css中，unordered必须垂直显示，并且没有项目符号
证明容器div的内容

这是因为“justify-content:space between”，而且它在一个列表中，水平显示。

在CSS

 #container {
display: flex;
justify-content: space-between;
}
#container ul li{ display:inline; list-style-type:none;
}

在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>

小开

其他文章提到了flexbox，但如果一行以上的项目是必要的, flexbox的space-between属性失败(见文章末尾)

到目前为止，唯一干净的解决方案是用

CSS网格布局模块 (Codepen演示)

基本上，必要的相关代码可以归结为:

ul {
display: grid; /* (1) */
grid-template-columns: repeat(auto-fit, 120px); /* (2) */
grid-gap: 1rem; /* (3) */
justify-content: space-between; /* (4) */
align-content: flex-start; /* (5) */
}

1)将容器元素设置为网格容器

2)根据需要设置网格的“自动”列数量。这是为响应式布局所做的。每列的宽度为120px。(注意使用auto-fit(相对于auto-fill)，它(对于1行布局)将空轨道折叠为0 -允许项目展开以占用剩余空间。(检查< a href = " https://codepen.io/danield770/pen/GOQZoQ?编辑器=1100" rel="noreferrer">这个演示，看看我在说什么))。

3)为网格行和列设置间隙/沟槽-在这里，因为想要一个“space between”布局-间隙实际上将是最小的差距，因为它会根据需要增长。

4)和5)-类似于flexbox。

body {
margin: 0;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fit, 120px);
grid-gap: 1rem;
justify-content: space-between;
align-content: flex-start;
  

/* boring properties: */
list-style: none;
width: 90vw;
height: 90vh;
margin: 2vh auto;
border: 5px solid green;
padding: 0;
overflow: auto;
}
li {
background: tomato;
height: 120px;
}

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Codepen演示(调整大小以查看效果)

<人力资源>

浏览器支持- Caniuse

目前支持Chrome (Blink)， Firefox, Safari和Edge!．.． IE的部分支持(参见这篇文章 by Rachel Andrew)

注:

Flexbox的space-between属性适用于一行项目，但当应用于包装它的项目的flex容器时-(与flex-wrap: wrap) -失败，因为你无法控制最后一行项目的对齐; 最后一行总是将被赋值(通常不是你想要的)

为了演示:

body {
margin: 0;
}
ul {
  

display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;
  

list-style: none;
width: 90vw;
height: 90vh;
margin: 2vh auto;
border: 5px solid green;
padding: 0;
overflow: auto;
  

}
li {
background: tomato;
width: 110px;
height: 80px;
margin-bottom: 1rem;
}

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

< >强Codepen < / >强(调整大小，看看我在说什么)

关于CSS网格的进一步阅读: