使用修复空间（可变宽度）对齐元素

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添加到弹性项目以及具有固定值的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;的缩写。

Answer 2

您可以使用display: table和display: table-cell：

＆＃13;

＆＃13;

.container {
  display: table;
  width: 100%;
  border-spacing: 10px 0;
  border-collapse: separate;
  background: palevioletred;
}
.container div {
  display: table-cell;
}
.container img {
  display: block;
  width: 100%;
  height: auto;
}

＆＃13;

<div class="container">
  <div><img src="//dummyimage.com/200x100/000/CCC"></div>
  <div><img src="//dummyimage.com/300x100/000/CCC"></div>
  <div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
  <div><img src="//dummyimage.com/200x100/000/CCC"></div>
  <div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
  <div><img src="//dummyimage.com/600x100/000/CCC"></div>
</div>

＆＃13;

＆＃13;

＆＃13;