有序列表两列流

任何人都知道一个最好的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

有序列表两列流

回答

相关问题