参见英文答案 >
How to display list items as columns?6个
我想将列表分成多列,每列应该有最多5个数据列表,如下图所示.请指导我如何实现这一目标？
我想将列表分成多列,每列应该有最多5个数据列表,如下图所示.请指导我如何实现这一目标？
解决方法
CSS3列应该是最佳选择(更新：也是flexBox),但遗憾的是还没有广泛的支持.您可以通过简单的2d变换获得相同的结果(在IE9上也可用)
基本上所有列表项都浮动,无序列表旋转-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);
}
