总结项目

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>