css - 3 个浮动 div，内容溢出到下一个 div - html 和 css

Question

我有 3 个向左浮动的 div，具有连续的内容和固定的高度，然后从第一个 div 溢出的内容应该转移到第 2 个 div，而第 2 个 div 的其他溢出内容必须转移到第 3 个 div。现在我实际上是通过复制粘贴来手动完成的。但我希望它是动态的，因此，如果我输入内容，它应该被分配到这 3 个 div 中。

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代码

请让我知道，如果有人有任何解决方案。

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;
}