防止在使用列寬屬性時分割內部div div123s

Question

我試圖創建一個多列布局，同時仍然將「內部div」放在一起。 行高屬性在彼此頂部堆疊div時表現不錯，但將我的內部div劃分爲一半。

列不一定要完全相同的高度。

任何幫助將不勝感激！

<div class="c"> 
    <div>A</div> 
    <div>B</div> 
    <div>C</div> 
    <div>D</div> 
    <div>E</div> 
    <div>F</div> 
</div> 

.c { 
    -webkit-column-width:250px; -webkit-column-gap:10px; 
    -moz-column-width:250px; -moz-column-gap:10px; 
    column-width:250px; column-gap:10px; 
    color:white; 
} 

.c > div:nth-child(1) { height:100px; background-color:grey; } 
.c > div:nth-child(2) { height:200px; background-color:blue; } 
.c > div:nth-child(3) { height:100px; background-color:red; } 
.c > div:nth-child(4) { height:100px; background-color:yellow; } 
.c > div:nth-child(5) { height:100px; background-color:black; } 
.c > div:nth-child(6) { height:100px; background-color:orange; } 

參見下面的例子 http://jsfiddle.net/D73pD/

Answer 1

您必須添加

-webkit-column-break-inside: avoid; 

每個div元素

更新小提琴：http://jsfiddle.net/D73pD/1/

Source