列表划分为多个列 [英] List divide into multiple columns

问题描述

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

解决方案

CSS3列应该是最佳选择，但遗憾的是还没有广泛的支持。您可以使用简单的2d变换（也可以在 IE9 ）上获得相同的结果

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

基本上所有列表项都是浮动的，无序列表被旋转-90deg。

<$>

<$>

p $ p> div {
border：1px green solid;
/ *在div上使用easyclearing（或这种解决方法）* /
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）;
}


I want to divide the list into multiple column and each column should have maximum number of 5 data list same as shown in below image. Please guide how can I achieve this?

解决方案

CSS3 columns should be the optimal choice, but unfortunately has not a wide support yet. You can achieve the same result with simple 2d-transforms (available also on IE9)

See http://jsfiddle.net/79rtx/1/

Basically all list-items are floated, the unordered list is rotated by -90deg. and list-items rotated by 90deg.

---

Relevant 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);
}

这篇关于列表划分为多个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！