有序列表两列流程

Question

任何人都知道一种优选的css技术，如果它比容器的高度长，可以让ol流入两列？列表中的项目数可能会有所不同，容器的高度可能会发生变化。

当我尝试将li设置为width:50%和float:left时，它会分为两列，但是2会在1旁边而不是在它之下。

我想要实现的目标是：

1. abcdef 4. abcdef
2. abcdef 5. abcdef
3. ABCDEF

Answer 1

这适用于使用column-count和column-gap规则的现代浏览器（即非IE）：

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;
}

跨浏览器选项为：

1. 在OL中定义两个DIV并将它们浮动到左侧
2. 预先计算LI的总数
3. 如果总数超过一个DIV的容量，则将其余部分放在第二个DIV中