Css3的div布局与列数

Question

我想布置我的div的列3.我使用列数为此。我已经将包装大小设置为1000x300px，这应该适合3x5格。 div从包装物中传出并且不适合在里面？

<div id="wrapper"> 
    <div class="box">0</div> 
    <div class="box">1</div> 
    <div class="box">2</div> 
    ... 
</div> 

https://jsfiddle.net/nhmu3ws0/

编辑：

我想要实现这个布局的div：

1 4 7 ... 
2 5 8 
3 6 9 

答案：

我确实需要这样的：

display: flex; 
flex-direction: column; 
flex-wrap: wrap; 

Answer 1

编辑

那么，要实现你已经在你的更新问题描述的布局，你需要删除column-count性质，因为这会限制你列三个。

要在每个列中包含三个100px高的div的无限数量的列，请将父级的高度限制为3 × 100px，即300px，并且只需定义column-width属性。

实施例： https://jsfiddle.net/nhmu3ws0/2/

---

因为列将重复自己以外的含父元素，如果他们不父的范围内配合。

在你的小提琴中，你已经将包装元素的高度定义为300px。你的小提琴在包装里有15个div。您不能在300px高度的父级中放入100px的div123sd。

父级需要足够高以容纳组合div除以列数的总高度。所以，在你的小提琴的情况下，父母的高度必须是500px（这是（15 ×100）/ 3）。

HTML：

<div id="wrapper"> 
    <div class="box">0</div> 
    <div class="box">1</div> 
    <div class="box">2</div> 

    <div class="box">3</div> 
    <div class="box">4</div> 
    <div class="box">5</div> 

    <div class="box">6</div> 
    <div class="box">7</div> 
    <div class="box">8</div> 

    <div class="box">9</div> 
    <div class="box">10</div> 
    <div class="box">11</div> 

    <div class="box">12</div> 
    <div class="box">13</div> 
    <div class="box">14</div> 

</div> 

CSS：

#wrapper { 
    position: absolute; 
    width: 1000px; 
    height: 500px; 
    background: green; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count: 3; 
    -webkit-column-width: 200px; 
    -moz-column-width: 200px; 
    column-width: 200px; 
} 

.box { 
    width: 200px; 
    height: 100px; 
    background: red; 
    font-size: 30px; 
    color: #fff; 
} 

https://jsfiddle.net/nhmu3ws0/1/