html - 子 div 均匀分布并刷新到父 : how to? 的一侧

Question

对不起这个标题，但我真的不知道该怎么说。我一直在搜索 google 和 SO，并一直试图找到类似的东西，我相信之前有人问过，所以如果我的搜索不够彻底，我深表歉意。

我正在尝试将布局放在一起，看起来像这样

我想弄清楚是否有一种纯 CSS 方法可以做到这一点，而不必为顶行/底行和每行的开始/结束分配特殊类。这也是创建的目的，如果有超过 6 个框，它将动态填充并滚动。将滚动条的高度/宽度从图片中剔除，是否有一种方法可以使用纯 CSS 创建此布局，或者我是否必须查看 javascript 解决方案？

我考虑过使用 flexbox，但我需要它至少兼容 IE8，所以我不能真的走那条路。

非常感谢。

Answer 1

您可以通过 float 它们或以内联 block 显示它们来轻松实现这一点。

<div class="inline-block">
    <span></span><span></span><span></span><span></span><span></span><span></span>
</div>

<div class="float">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

div {
    background: blue;
    margin: 0 0 10px;
    width: 330px; }
span {
    background: red;
    width: 100px;
    height: 50px;
    margin: 5px; }
.inline-block { 
    line-height: 0; }
.inline-block span { display: inline-block; }
.float { overflow: hidden; }
.float span { float: left; }

预览:http://jsfiddle.net/Wexcode/upFPC/