html - 将列表项拆分为垂直列

Question

我对我的 UL/LI 语法有点生疏，我想知道你是如何进行列表换行的。例如制作:

1 2个 3个 4个 5个 6

看起来像:

1 4
2 5
3 6

现在我有一个页眉、内容和页脚(所有高度都设置为一定的 %)我希望列表在到达页脚或内容 % 的底部时换行。

所以我想要的最终产品是一个内容 div，它可以根据屏幕适合的内容动态更改大小。如果我有 12 个元素并且屏幕可以容纳 2 列，那么它将是 2 列 6 行，如果屏幕可以容纳 4 列，那么它将是 4 列 3 行，等等。

Answer 1

首先，这很愚蠢……但它确实有效……然而，它只在某些情况下有效，并且涉及大量愚蠢数字。绝对不是模块化的。 FIDDLE (我需要提醒您需要调整浏览器的大小吗？)

HTML

<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
</ul>

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 可以解决这个问题...如果您的表没有动态填充不同数量的信息 - 您可以做这样的装饰或使用一些绝对定位 - 列可能是路要走。祝你好运……