html – 有序列表两列流
发布时间：2020-12-14 18:46:59 所属栏目：资源 来源：网络整理
导读：任何人都知道一种优选的css技术,如果它比容器的高度长,可以让ol流入两列？列表中的项目数可能会有所不同,容器的高度可能会发生变化. 当我尝试将li设置为宽度：50％并且浮动：左边是两列,但是2在1旁边而不是在它下面. 我想要实现的是： abcdef 4. abcdef abcd
|
任何人都知道一种优选的css技术,如果它比容器的高度长,可以让ol流入两列？列表中的项目数可能会有所不同,容器的高度可能会发生变化.
当我尝试将li设置为宽度：50％并且浮动：左边是两列,但是2在1旁边而不是在它下面. 我想要实现的是： > abcdef 4. abcdef 解决方法
这适用于使用列数和列间隙规则的现代浏览器(即非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中 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |