html – 使用修复空间(可变宽度)对齐元素

我有一个容器,里面有可变数量的元素.
这些元素应该是合理的,但固定空间在(例如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属性,如下所示：

EXAMPLE HERE

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;的简写.