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/