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

概述我的UL / LI语法有点生疏,我想知道如何制作列表包装.比如make： 1 2 3 4 五 6 看起来像： 1 4 2 5 3 6 现在我有一个标题,内容和页脚(所有高度都设置为某个％)我希望列表在到达页脚或内容％的底部时换行. 所以我想要的最终产品是内容div,可以根据屏幕上的内容动态改变大小.如果我有12个项目,并且屏幕可以容纳2列,那么它将是2列6行,如果屏幕可以容纳4列,那么它将是4列3 我的ul / li语法有点生疏,我想知道如何制作列表包装.比如make：

1
2
3
4
五
6

看起来像：

1 4
2 5
3 6

现在我有一个标题,内容和页脚(所有高度都设置为某个％)我希望列表在到达页脚或内容％的底部时换行.

所以我想要的最终产品是内容div,可以根据屏幕上的内容动态改变大小.如果我有12个项目,并且屏幕可以容纳2列,那么它将是2列6行,如果屏幕可以容纳4列,那么它将是4列3行,等等.

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

总结

以上是内存溢出为你收集整理的html – 将列表项拆分为垂直列全部内容，希望文章能够帮你解决html – 将列表项拆分为垂直列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。