javascript - 我想将列表项显示为 2 列或更多列(动态对齐)

Question

我可以像这样使用 float:left; 来完成列表

但我想这样显示(2 列或更多列)

我该怎么做？

@sandeep 给出了很好的解决方案。不幸的是在 IE 中不起作用(需要 ie7 及更高版本)。

有什么帮助吗？

Answer 1

为此，您可以使用 column-count 属性:

div#multicolumn1 {
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 3;
    column-gap: 50%;
}

检查这个jsFiddle .

注意:它在 IE 中不起作用。

对于 IE，您可以使用此 JavaScript:CSS3 - Multi Column Layout Demonstration