使用单个普通列表自动创建列

时间:2012-09-06 17:30:56

标签: html css dynamic html-lists css-multicolumn-layout

我正在尝试编写灵活的代码,其中我有一个普通的<ul>,它会自动为每个第5个元素创建另一个列。我找到了tutorial来实现这一点,但是将项目放在水平顺序中,而我需要垂直顺序。我已经看到了一些输出垂直顺序的其他教程,但也将class="first"class="second"附加到每个li,这不是我想要的。我希望使用现有的HTML代码。

我想要的:

-01     -06     -11   
-02     -07     -12
-03     -08     -13
-04     -09     -14
-05     -10     -15

我有什么:

-01     -02     -03   
-04     -05     -06
-07     -08     -09
-10     -11     -12
-13     -14     -15

CSS:

ul {
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
}

li {   
    float:left;
    display:inline;
}

.double li  { width:50.0%; } /* 2 col */
.triple li  { width:33.3%; } /* 3 col */
.quad li    { width:25.0%; } /* 4 col */
.six li     { width:16.6%; } /* 6 col */

HTML:

<ul class="triple">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

2 个答案:

答案 0 :(得分:4)

您可以使用此code

ul
{
    -webkit-column-count: 4; -webkit-column-gap:20px;
    -moz-column-count:4; -moz-column-gap:20px;
    -o-column-count:4; -o-column-gap:20px;
    column-count:4; column-gap:20px;
}

但我不确定它是否适用于所有浏览器。你应该试验一下。

以下是jsFiddle:http://jsfiddle.net/leniel/nRL4R/

答案 1 :(得分:0)

http://codepen.io/anon/pen/iDzmq

这是我知道这样做的唯一方法。 只是在用于呈现列表的代码中,将其设置为每隔5小时添加一个ul.sub

有问题吗?