10

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

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

我想要实现的是：

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

1 回答 1

24

这适用于使用column-countandcolumn-gap规则的现代浏览器（即不是 IE）：

小提琴

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
于 2012-12-10T00:43:43.800 回答