在div中包装列表

Question

我有一个div,我在div里面有一个列表.我希望div中的列表看起来像这样:

Item 1    Item 5    Item 9

Item 2    Item 6    Item 10

Item 3    Item 7    Item 11

Item 4    Item 8    Item 12

我明白用display:inline-block我可以这样做,

Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8

但是我想让列垂直移动,然后在div结束后再从下一列的顶部开始(如上所示).div有一个固定的高度.没有任何显示,文本只是在div之外.

谢谢!

Answer 1

@urgenthhelp; 你可以使用css3 columns count属性.

CSS

ul {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
li{margin-bottom:10px}

检查这个http://jsfiddle.net/sandeep/Qnsqm/可能对你有帮助.