有序列表两列流

Posted 2023-03-05

【中文标题】有序列表两列流

【英文标题】：ordered list two column flow

【发布时间】：2012-11-27 10:09:02

【问题描述】：

如果ol 比容器的高度长，我想要一个最好的纯 CSS 技术来让它流入两列。列表中的项目数量可能会有所不同，并且容器的高度可能会发生变化。

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

我想要实现的是：

abcdef 4.abcdef abcdef 5.abcdef abcdef

【问题讨论】：

你试过了吗？ linkAutomatic two columns with CSS or javascript

你可以使用this

【参考方案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;

跨浏览器选项是：

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