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

Question

我有一个容器,里面有可变数量的元素.元素应该是合理的,但在(例如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做专业的方法吗？

编辑:我应该提到这个修复空间是%值!

Answer 1

如果可以选择使用Flexbox，您可以添加flex: 1到 Flex 项目以及具有固定值的 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;。