如何按特定順序對齊列表元素

Question

這是一個簡單的問題，但我似乎被卡住了。我試圖通過一個特定的順序來對齊列表元素，這個順序只受到它們父類的高度的限制。

例子：JSBin

所以我想改變項目的順序走垂直而非水平 - 現在的順序是：

1 2 

3 

我試圖將其更改爲：

1 3 

2 

訣竅是不使用JavaScript或CSS3（它應該與舊瀏覽器兼容）。

Answer 1

太好了。沒有JavaScript和沒有CSS3？這可以通過使用可以輕鬆實現兩種：

• Flexbox的
• 列

我可以給你兩個例子：

.example-list { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 120px; 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    -o-column-count: 2; 
 
    column-count: 2; 
 
} 
 

 
.example-list li { 
 
    display: inline-block; 
 
    background: red; 
 
    padding: 20px; 
 
    margin: 5px; 
 
    color: #FFF; 
 
    float: left 
 
}

<ul class="example-list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

預覽：

更多元素：