css - 内联 block 元素在可变宽度容器内均匀分布

Question

我试图在 90% 宽度的容器内均匀地间隔行内元素。我已经在寻找解决方案并尝试了不同的方法，但都没有成功。

最有前途的想法是 text-align: justify with and 100% width child

这是我的代码:

    <div id="stage">
        <div class="thumb">
            <img src="generic_source" height="200px"/>
        </div>
        <div class="thumb">
            <img src="generic_source" height="200px"/>
        </div>
        .
        .
        .
        .
    </div>

CSS:

#stage {
   width: 90%;
   margin: 50px auto;
   text-align: justify;
   border: 1px solid black;
}
#stage::after {
   display:inline-block;
   width:100%;
   content:'';
}
.thumb {
   height: 200px;
   display: inline-block;
   margin: 10px;
   width: 300px;
   text-align: center;
   padding: 2px;
}

除了右边留下的空间，一切看起来都很棒。放大和缩小使它或多或少变得明显，但仍然很明显

我有 100 多个拇指，我希望看到它们对称排列

谢谢

编辑:在这里你可以看到这个例子。缩放页面时注意左侧到右侧边框的空间

Answer 1

我认为在 css 中做到这一点的唯一方法是使用 flexbox。您需要更改#stage 选择器:

#stage{
    width: 90%;
    margin: 50px auto;
    text-align: justify;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

如果你不能使用它(需要支持旧的浏览器)你可以尝试像freewall这样的js解决方案