3具有溢出內容到下一個DIV浮動的div - HTML和CSS

Question

我有被浮置左，具有連續內容和固定高度3級div的，那麼溢出從第一個div內容應轉向第二DIV和其他溢出的內容第二格必須轉入第三格。現在我實際上是通過複製粘貼來手動完成它。但我希望它是動態的，所以，如果我輸入內容，它應該分佈到這3個div中。

格結構：

<div id="main"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

CSS部分：

.child{ 
    float:left; 
    width:32%; 
    padding:4px; 
} 
.bRight{ 
    border-right: 1px solid #ccc; 
} 

下面

是我的工作的例子：

jsfiddle code

請讓我知道，如果有人有任何解決方案。

Answer 1

你應該使用列數屬性

http://jsfiddle.net/QRsWQ/7/

#main { 
    -webkit-column-count:3; 
    -moz-column-count:3; 
    -o-column-count:3; 
    -ms-column-count:3; 
    column-count:3; 
} 
#main div { 
    float:left; 
    padding:4px; 
    background:green; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -o-box-sizing:border-box; 
}