Css 让孩子们彼此之间有相等的空间来填充容器

我有一个宽度可变的

div

，这个div中的子对象数量可变。我希望子对象填充

div

中的空间。我首先尝试将

div

更改为

display:table

，并将子项更改为

display:table cell

，但最终所有子项都填满了所有空间，并且没有遵守其

width

和

max width

属性。然后我尝试了表格方法：我将

div

更改为

表格

（是的，我知道，这不推荐，这就是我可能在这里询问的原因），并将子项包装到

tr

中，每个都放在

td

中，但我最终所有子项单元格填满了整个空间，但向左对齐（我已经设置了子项

div

s

display:inline块

）：

如果我将对齐更改为

居中

，我会得到以下结果：

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

我通过将第一个

td

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

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

类似的内容

HTML:

---

您可以使用包装器上的

文本对齐：justify

获得等间距的框。问题是它对最后一行（在本例中也是第一行）不起作用，因此您可以使用

：after

伪元素和

宽度：100%

，以创建新的最后一行。

效果很好，但是（此外），如果没有足够的空间，是否可以让孩子们缩小（考虑他们的长宽比）？这是一个网站上拇指的html，如果大小不够，我希望这些拇指在空间中缩小（如果它们彼此接近，例如10px）如果没有大量使用js就无法隐藏最后一个元素，那么如果没有足够的空间，是否可以隐藏最后一个元素，例如，在窄屏幕上只显示两个拇指，在宽屏幕上显示四个或五个拇指等？@canpoyrazoğlu是的，这是可能的。只需使用

width百分比并删除
min width
属性。@canpoyrazoğlu请注意，在旧浏览器上混合百分比和常量值（如10px）是行不通的。但如果您不介意，请确保所有宽度总和为100%，添加边框并使用（）。或者你可以使用。@canpoyrazoğlu，如果你想保持纵横比，你可以使用。@canpoyrazoğlu上一个小提琴有一个错误：为了消除第一个元素之前和最后一个元素之后的边界分隔，我使用了
border-[left/right]-宽度：0，但这增加了第一个和最后一个元素的高度。我已经用
边框-[left/right]-颜色：transparent
修复了它。
<div>
    <span id="s1"></span>
    <span id="s2"></span>
    <span id="s3"></span>
</div>

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;
}