我正在尝试编写灵活的代码,我有一个简单的< 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:
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15