當列之間的元素沒有精確地分隔時，CSS列不能正確堆疊元素

Question

由於某些原因，如果元素沒有精確地分配在列之間，它們會以奇怪的方式分解。

見視覺表現這裏：

根DIV的CSS

-webkit-column-gap: 10px; 
-moz-column-gap: 10px; 
column-gap: 10px; 
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3; 
float: none; 
width: 100%; 

元素

width: 100%; 
height: 206px; 

解決方案建議的CSS here並沒有爲我工作：/

Answer 1

您可以嘗試重置顯示給孩子避免看到它們擴散到不同的列：

.root { 
 
    -webkit-column-gap: 10px; 
 
    -moz-column-gap: 10px; 
 
    column-gap: 10px; 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    height: 206px; 
 
    background: turquoise; 
 
    display: inline-block;/* here layout reset , should do the trick in most browser, feed back appreciated :)*/ 
 
}

<div class="root"> 
 
    <div class="child"> 
 
    </div> 
 
    <div class="child"> 
 
    </div> 
 
    <div class="child"> 
 
    </div> 
 
    <div class="child"> 
 
    </div> 
 
    <div class="child"> 
 
    </div> 
 
</div>