我有一个容器,里面有可变数量的元素.
这些元素应该是合理的,但固定空间在(例如20px)之间.
这意味着每个元素的宽度必须适应.
这些元素应该是合理的,但固定空间在(例如20px)之间.
这意味着每个元素的宽度必须适应.
例如：
HTML
<div class="container">
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
</div>
CSS
div.container {
text-align: justify;
}
div.container div {
display: inline-block;
margin-right: 20px;
}
div.container div img {
width: 100%;
}
最后看起来应该是这样的(这张图片显示了两个例子：2个元素和3个元素;宽度是动态的,但空间修复[20px])：
它应该使用不同数量的子元素.
用CSS做专业的方法吗？
编辑：我应该提到这个修复空间是％值！
解决方法
如果使用
Flexbox是一个选项,您可以将flex：1添加到弹性项目以及具有固定值的margin属性,如下所示：
div.container { display: flex; }
div.container div {
height: 50px; /* Just for demo */
flex: 1;
margin-left: 20px;
}
div.container :first-child { margin-left: 0; }
实际上,flex：1在这种情况下是flex-grow: 1;的简写.
