如何根据元素的数量响应地设置div？

Question

如何以一种看起来更自然，反应灵敏的方式将这些物体居中？

布局是一个div，每个指标有多个div。我用.float-left让他们去下一行。

如果有5：

，我可以让它们像这样定位吗？

****O****O****O****
******O*****O******

如果有4，那就像这样：

**O**O**O**O**

Answer 1

我相信你必须使用JavaScript或CSS Flexbox。不过，modern browsers仅支持Flexbox。

这是一个使用flexbox的简单示例：

Demo

HTML

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
    margin-bottom: 1em;
    display: flex;
    justify-content: space-around;
}

.wrapper > div {
    width: 100px;
    height: 100px;
    background: blue;
    border: solid 2px red;
}

---

当然，要在所有现代浏览器中使用，您的CSS看起来更像是：

.wrapper {
    margin-bottom: 1em;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: space-around;
    -webkit-justify-content: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
}

.wrapper > div {
    width: 100px;
    height: 100px;
    background: blue;
    border: solid 2px red;
}