Question

我的UL / LI语法有点生疏，我想知道如何制作列表包装。例如make：

1 2 3 4 五 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*/
   }

将列表项拆分为垂直列

2 个答案: