Question

我想将列表分成多列，每列最多应有5个数据列表，如下图所示。请指导我如何实现这一目标？

enter image description here

Answer 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>

Answer 2

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

获得相同的结果

请参阅http://jsfiddle.net/79rtx/1/

基本上所有列表项都是浮动的，无序列表会旋转-90deg。和列表项目旋转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);
}

Answer 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

Answer 4

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

列表分为多列

4 个答案: