我正在尝试编写灵活的代码,其中我有一个普通的<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>
答案 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)