有序列表兩列流

任何人都知道一個最好的CSS技術，讓ol流入兩列，如果它長於容器的高度？列表中的項目數量可能會有所不同，容器的高度可能會發生變化。有序列表兩列流

當我嘗試將li設置爲width:50%和float:left時，它會分兩列，但是2會在1旁邊而不是在它下面。

什麼，我想實現的是：

ABCDEF 4. ABCDEF
ABCDEF 5. ABCDEF
ABCDEF

2012-12-10 Devin Crossman

你試過嗎？ [鏈接]（http://stackoverflow.com/questions/194803/automatic-two-columns-with-css-or-javascript?rq=1）'用CSS或JavaScript自動創建兩列' – sonofagun

你可以使用[this] （http://stackoverflow.com/a/20701658/1320764） – VoVaVc

這將爲現代瀏覽器中運行（即不是IE）使用column-count和column-gap規則：

fiddle

ol#two-columns { 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
}

的跨瀏覽器的選擇是：

定義兩個div的OL裏面和他們漂浮向左
預先計算LI的
如果總的總數超過一個DIV的容量，把其餘的在第二個DIV

來源

2012-12-10 00:43:43 Matanya

有序列表兩列流

回答

相關問題