子 div 均匀分布并冲到父级的一侧：如何？

Question

抱歉标题，但我真的不知道如何措辞。我一直在寻找 google 和 SO 并试图找到类似的东西，我相信人们之前已经问过，所以如果我的搜索不够彻底，我深表歉意。

我正在尝试整理一个看起来像这样的布局

我试图弄清楚是否有一种纯 CSS 方式来执行此操作，而不必为顶行/底行和每行的开始/结束分配特殊类。这也是为了在超过 6 个框时动态填充和滚动而创建的。把滚动条的高度/宽度从图片中去掉，有没有办法用纯 CSS 创建这个布局，还是我必须看看 javascript 解决方案？

我研究过使用 flexbox，但我需要它至少兼容 IE8，所以我不能真正走这条路。

非常感谢。

Answer 1

您可以通过浮动它们或将它们显示在行内块中来轻松实现这一点。

<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/