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

Answer 2

您可以使用 CSS 列并开始基本设置 ul 的样式，如下所示：

ul {column-count:2;
/* other styles*/
   }