html – 有序列表两列流

前端之家收集整理的这篇文章主要介绍了html – 有序列表两列流前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
任何人都知道一种优选的css技术,如果它比容器的高度长,可以让ol流入两列?列表中的项目数可能会有所不同,容器的高度可能会发生变化.

当我尝试将li设置为宽度:50%并且浮动:左边是两列,但是2在1旁边而不是在它下面.

我想要实现的是:

> abcdef 4. abcdef
> abcdef 5. abcdef
> abcdef

解决方法

这适用于使用列数和列间隙规则的现代浏览器(即非IE):

fiddle

  1. ol#two-columns {
  2. -moz-column-count: 2;
  3. -moz-column-gap: 20px;
  4. -webkit-column-count: 2;
  5. -webkit-column-gap: 20px;
  6. column-count: 2;
  7. column-gap: 20px;
  8. }

跨浏览器选项将是:

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

猜你在找的HTML相关文章