css - 让 children 彼此之间的距离相等以填充容器

Question

我有一个宽度可变的 div，并且我在这个 div 中有数量可变的子元素。我想让 children 填满 div 内的空间。我首先尝试将 div 更改为 display:table 并将子项更改为 display:table-cell 但我最终将所有子项都填满了所有空间并且不遵守它们的 width 和 max-width 属性。然后我尝试了表格方法:我已经将 div 更改为 table (是的，我知道，不推荐这样做，这就是为什么我可能在这里问) 并将子单元包装到 tr 中，每个子单元都在 td 中，但我最终将所有子单元格填满了整个空间，但向左对齐(我已经设置子 div 的 display:inline-block):

如果我将对齐方式更改为 center，我会得到:

它们居中，但我仍然在父级的左侧和右侧有空格(我设置的黄色背景用于区分)。我真正想要的是:

我通过设置第一个 td 将文本左对齐，第二个居中，第三个右对齐来实现这一点。但是我可能有更多这样的缩略图，所以我需要一个通用的解决方案。

如何在容器内放置可变数量的子元素来填充宽度，第一个元素从容器的左边界开始(与第二个图像不同)，最后一个元素在右边界结束容器(如第三张图片所示)？

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% 以创建一个新的最后一行。