在彼此之间布置相等空间的儿童以填充容器

Question

我有一个宽度可变的div，我在这个div中有一定数量的孩子。我希望孩子们填满div内的空间。我首先尝试将div更改为display:table，将孩子更改为display:table-cell，但最终所有孩子都填满了所有空间并且没有遵守他们的width和{{ 1}}属性。然后我尝试了表格方法：我已将max-width更改为div（是的，我知道，不推荐，这就是我可能在这里问的原因）并将孩子们包裹起来一个table，每个都在tr中，但我最终填满整个空间的所有子单元格，但是向左对齐（我设置了子td s {{1 }}）：

如果我将对齐方式更改为div，我会得到：

它们居中，但我仍然在父母的左侧和右侧获得空格（我设置的黄色背景用于区分）。我真正想要的是：

我通过将第一个display:inline-block设置为左对齐，第二个为中心，第三个为右对齐来实现此目的。但我可能有更多这些缩略图，所以我需要一个通用的解决方案。

如何在容器内布置可变数量的子项以填充宽度，第一个元素从容器的确切左边界开始（与第二个图像不同），最后一个元素以完全右边界结束容器（如第三张图所示）？

Answer 1

这样的东西？

HTML：

<div>
    <span id="s1"></span>
    <span id="s2"></span>
    <span id="s3"></span>
</div>

CSS：

div{
    background: #ff6;
    text-align: justify; /* Important */
    font-size: 0; /* Used to remove spaces */
}
div:after{ /* Used to create a new last line */
    content: '.';
    display: inline-block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

span{
    display: inline-block;
    height: 150px;
}

/* Use your widths, min-widths and max-widths here: */
#s1{
    background: red;
    width: 15%;
    min-width: 50px;
    max-width: 150px;
}
#s2{
    background: green;
    width: 40%;
    min-width: 50px;
    max-width: 250px;
}
#s3{
    background: blue;
    width: 40%;
    min-width: 50px;
    max-width: 200px;
}

Demo

您可以在包装器上使用text-align: justify获得等间距的盒子。问题是它不适用于最后一行（在这种情况下也是第一行），因此您可以使用text-align-last或:after伪元素与width: 100%为了创建一个新的最后一行。