首先,这是愚蠢的…但它确实有效……但是,它只适用于某些情况并涉及大量愚蠢的数字.绝对不是模块化的.
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东西…如果你的表没有动态填充不同数量的信息 – 你可以做这样的美容或使用一些绝对定位 – 列可能是要走的路虽然.祝好运…