怎么在html垂直拆分,html – 将列表项拆分为垂直列

首先,这是愚蠢的…但它确实有效……但是,它只适用于某些情况并涉及大量愚蠢的数字.绝对不是模块化的.

FIDDLE(我需要提一下你需要调整浏览器的大小吗？)

HTML

• 01
• 02
• 03
• 04
• 05
• 06

CSS

/* apply a natural box layout model to all elements */

* { -moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

padding: 0;

margin: 0;

}

ul {

list-style: none;

padding: 0; margin: 0;

width: 4em;

border: 1px solid orange;

overflow: hidden; /* in place of clearing float */

}

ul li {

position: relative; /* for the negative top distance to work */

display: inline-block;

border: 1px solid red;

width: 2em;

height: 2em;

float: left;

clear: left;

}

ul li:nth-of-type(n+4) {

float: right;

clear: none;

top: -6em;

}

@media (min-width: 30em) {

ul {

width: auto;

float: left;

}

ul li {

float: left;

clear: none;

border: 1px solid green;

}

ul li:nth-of-type(n+4) {

float: left;

top: 0;

}

} /* =========== end === */

我打赌有一个很好的jQuery东西…如果你的表没有动态填充不同数量的信息 – 你可以做这样的美容或使用一些绝对定位 – 列可能是要走的路虽然.祝好运…