Question

我正在尝试在90％宽度的容器内均匀分隔内联元素。我已经找到了一个解决方案并尝试了不同的事情而没有成功。

最有希望的想法是text-align：justify with和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解决方案

内嵌块元素在可变宽度容器内均匀分布

1 个答案: