让未知数量的 div 很好地填充

Question

现在，标题可能有点模糊，但我不知道任何其他措辞方式。我基本上想要的是：

---------  ---------  ---------
| DIV 1 |  | DIV 2 |  | DIV 3 |
---------  ---------  ---------
---------  ---------  ---------
| DIV 4 |  | DIV 5 |  | DIV 6 |
---------  ---------  ---------

这些div 位于宽度为 1000px 的父级中。所以每个div是宽度的30%（基本上中间有适当的间隙）。

该 HTML：

<div id="matches">
    <div class="match_box">
        DIV 1
    </div>
    <div class="match_box">
        DIV 2
    </div>
    <div class="match_box">
        DIV 3
    </div>
    <div class="match_box">
        DIV 4
    </div>
    <div class="match_box">
        DIV 5
    </div>
    <div class="match_box">
        DIV 6
    </div>
</div>

CSS：

#matches {
    height: 100%;
    width: 1000px;
}

我将如何做到这一点？（.match_box是需要很好地流动的div）。

提前感谢！

Answer 1

如果您不必定位较旧的浏览器，则可以使用 flexbox。这使您可以很好地间隔元素。在这里，他们走到两侧的边缘。

#matches {
    height: 100%;
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.match_box {
  width:30%;
  background-color: #eee;
  margin-bottom: 10px;
}

https://jsfiddle.net/ekhts0fs/5/

将两端对齐内容更改为间距或中心（请参阅上面的弹性框链接）可以以不同的方式定位它们。

Answer 2

试试这个：

#matches {
  height: 100%;
  width: 1000px;
}
.match_box {
  width:30%;
  float: left;
  background-color: #ccc;
  margin: 5px;
  padding: 5px;
}

住：

https://jsfiddle.net/Lu8p6gr3/2/