css - 在 block 中显示两列

Question

我需要一些帮助来解决问题。

在一定高度的 block 中有一个列表。高度超过了列表的高度，所以是displayed in 2 columns .

一开始我没有填满列表项的第一列，然后是第二列。 it looks like this

CSS

.wrap{

}
.wrap ol{
    height: 290px;
    width: 500px;
    display: block;
    outline: 1px solid red;
    overflow: hidden;
}

    .wrap ol li{
        width: 50%;
        float: left;
    }

Answer 1

一种简单的方法是使用 CSS 多列。

.wrap{
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

参见 http://jsfiddle.net/aC4Nc/

要增加与旧浏览器的兼容性，请使用此 polyfill