我想将列表项显示为2列或更多列（动态对齐） [英] I want to show list items as 2 or more columns (dynamic alignment)

问题描述

我可以使用 float：left; 像这样

来做这个列表

但我想显示它像这样as 2 or more columns）

我该如何做？

@sandeep给了很好的解决方案。不幸的是不能在IE（需要ie7及以上）。

任何帮助？

解决方案

为此，您可以使用 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 - 多栏布局演示

I am able to do the list using float:left; like this

But I would like to show it like this (as 2 or more columns)

How can I do that?

@sandeep gave good solution. Unfortunately does not work in IE(need ie7 and above).

any help?

解决方案

For this, you can use the column-count property:

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

Check this jsFiddle.

Note: It does not work in IE.

For IE, you can use this JavaScript: CSS3 - Multi Column Layout Demonstration

这篇关于我想将列表项显示为2列或更多列（动态对齐）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！