其他文章提到了flexbox，但如果需要多行项目，flexbox的空格属性就失效了(见文章末尾)

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

CSS网格布局模块(代码依赖演示)

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

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。(注意使用了自动匹配(而不是自动填充)，它(对于1行布局)将空轨道折叠为0 -允许项目展开以占用剩余空间。(看看这个演示，看看我在说什么))。

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

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>

代码依赖演示(调整大小以查看效果)

浏览器支持- Caniuse

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

NB:

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

为了演示:

身体{ 保证金:0; ｝ ul { 显示:flex; justify-content:之间的空间; flex-wrap:包装; align-content: flex-start; list-style:没有; 宽度:90大众; 身高:90 vh; 利润率:2vh auto; 边框:5px纯绿色; 填充:0; 溢出:汽车; ｝ 李{ 背景:番茄; 宽度:110 px; 身高:80 px; margin-bottom: 1快速眼动; ｝ < ul > <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> < / ul >

Codepen(调整大小，看看我在说什么)

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

中数 珍西蒙斯-学习CSS网格 CSS Grid | Codrops CSS参考的完整指南 一个网格CSS技巧的完整指南

其他文章提到了flexbox，但如果需要多行项目，flexbox的空格属性就失效了(见文章末尾)

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

CSS网格布局模块(代码依赖演示)

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

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。(注意使用了自动匹配(而不是自动填充)，它(对于1行布局)将空轨道折叠为0 -允许项目展开以占用剩余空间。(看看这个演示，看看我在说什么))。

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

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>

代码依赖演示(调整大小以查看效果)

浏览器支持- Caniuse

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

NB:

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

为了演示:

身体{ 保证金:0; ｝ ul { 显示:flex; justify-content:之间的空间; flex-wrap:包装; align-content: flex-start; list-style:没有; 宽度:90大众; 身高:90 vh; 利润率:2vh auto; 边框:5px纯绿色; 填充:0; 溢出:汽车; ｝ 李{ 背景:番茄; 宽度:110 px; 身高:80 px; margin-bottom: 1快速眼动; ｝ < ul > <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> < / ul >

Codepen(调整大小，看看我在说什么)

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

中数 珍西蒙斯-学习CSS网格 CSS Grid | Codrops CSS参考的完整指南 一个网格CSS技巧的完整指南

对于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>

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

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

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

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

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

现在最简单的方法是使用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/old-flexbox-and-new-flexbox/

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

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

这将使父节点在添加子节点时水平增长。

注意:这里假设'。孩子们有一个宽度和高度设置

希望能有所帮助。