html - 子div的间距均匀且与 parent 的一侧齐平:怎么办？

对不起，标题，但是我真的不知道该怎么写。我一直在寻找Google和SO，并且一直在尝试寻找类似的东西，我敢肯定人们之前已经问过，所以我很抱歉我的搜索不够彻底。

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



我试图找出是否有一种纯CSS的方式来执行此操作，而不必将特殊类分配给顶部行/底部行以及每一行的开始/结束。创建此文件的目的是将其动态填充，如果有6个以上的框，则进行滚动。将滚动条的高度/宽度从图片中取出，是否有一种方法可以使用纯CSS创建此布局，还是我必须查看JavaScript解决方案？

我看过使用flexbox，但是我至少需要兼容到IE8，这样我才能真正走这条路。

非常感谢。

最佳答案

您可以通过浮动它们或以内联块形式显示它们来轻松实现此目的。

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

关于html - 子div的间距均匀且与 parent 的一侧齐平:怎么办？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8684808/