總結項目

Question

的項目需要根據最大列高列安排，這樣

item 1 | item 6 
item 2 | 
item 3 | 
item 4 | 
item 5 | 

我嘗試使用此列CSS

ul { 
    height: 150px; 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
} 

但它安排的項目在像這樣的高度的列中

item 1 | item 4 
item 2 | item 5 
item 3 | item 6 

Answer 1

作爲CSS3列的替代方法，您也可以使用CSS3 flexboxes。

集的父元素的display到flex，設置flex-direction到column，然後迫使它通過添加flex-wrap: wrap來包裝。

flexbox容器元素將尊重高度，這似乎是您要實現的目標。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 140px; 
 
}

<ul class="container"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 
    <li>Item 10</li> 
 
</ul>