列表分为多列[重复]答案

【问题标题】：List divide into multiple columns [duplicate]列表分为多列[重复]
【发布时间】：2014-02-28 03:29:22
【问题描述】：

我想将列表分成多列，每列最多应该有 5 个数据列表，如下图所示。请指导我怎样才能做到这一点？

【问题讨论】：

jsfiddle.net/k7hk6
你需要支持IE8和IE9吗？我认为这些浏览器不支持此功能。不过，可能存在用于此的 polyfill。

标签： html css

【解决方案1】：

CSS 代码：-

#cols {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

HTML:-

<div id="cols">
    <ul>
       lists 
    </ul>
</div>

【讨论】：

【解决方案2】：

CSS3 具有将内容划分为列的属性：http://css-tricks.com/snippets/css/multiple-columns/。要每列只有五个项目，您可以调整列表容器的高度。

【讨论】：

【解决方案3】：

使用css3_column-count

CSS

 ul {
        column-count:4;
        -moz-column-count:4;
        -webkit-column-count:4;
    }

HTML

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
    <li>list item 7</li>
    <li>list item 8</li>
    <li>list item 9</li>
    <li>list item 10</li>
    <li>list item 11</li>
    <li>list item 12</li>
    <li>list item 13</li>
    <li>list item 14</li>
    <li>list item 15</li>
    <li>list item 16</li>
    <li>list item 17</li>
</ul>

DEMO

【讨论】：

当列表项的数量是动态的并且变为1时，您能否检查一下您的代码问题jsfiddle.net/ZTAM8/94

【解决方案4】：

CSS3 列应该是最佳选择（更新：也是 flexbox），但遗憾的是还没有得到广泛的支持。您可以通过简单的 2d 变换获得相同的结果（也可在 IE9 上获得）

见http://jsfiddle.net/79rtx/1/

基本上所有列表项都是浮动的，无序列表旋转-90度。和列表项旋转 90 度。

相关的css

div { 
    border   : 1px green solid; 
    /* use easyclearing on div (or this workaround) */
    overflow : auto; 
    height   : auto;
}

/* clear */
ul + * { clear: both; }

ul {
   float : left;
   height : 160px; /* (30 + 2px) * 5 */ 

   -webkit-transform : rotate(-90deg);
   -moz-transform : rotate(-90deg);
   -ms-transform : rotate(-90deg);
   -o-transform : rotate(-90deg);
   transform : rotate(-90deg);
}

li:nth-child(5n+1) { clear: right; }

li {
   width      : 30px;
   height     : 30px;  
   float      : right;
   margin     : 1px;
   background : #ccc;

   -webkit-transform-origin : 50% 50%;
   -moz-transform-origin : 50% 50%;
   -ms-transform-origin : 50% 50%;
   -o-transform-origin : 50% 50%;
   transform-origin : 50% 50%;

   -webkit-transform : rotate(90deg);
   -moz-transform : rotate(90deg);
   -ms-transform : rotate(90deg);
   -o-transform : rotate(90deg);
   transform : rotate(90deg);
}

【讨论】：

好东西！非常感谢:)
您能否检查jsfiddle.net/79rtx/235 当列表项的数量不是动态的并且变为一个时，您的代码中似乎存在问题。