将列表项拆分为垂直列。

I'm a little rusty on my UL/LI syntax and I was wondering how you make a list wrap. For example make:

我对我的UL/LI语法有点生疏了，我想知道你是怎么做列表包装的。例如:

1 2 3 4 5 6

1 2 3 4 5 6

Look like:

看起来像:

1 4
2 5
3 6

1 4 2 5 3 6

Right now I have a header, content, and footer (all with a height set to a certain %) I want the list to wrap once it reaches the footer, or the bottom of the content %.

现在我有了一个header、content和footer(所有的高度都设置为一定的%)，我希望列表在到达footer或content %的底部时进行包装。

So what I want as a final product is a content div to dynamically change size based on what can fit in the screen. If I have 12 items and the screen can fit 2 columns then it will be 2 columns with 6 rows, if the screen can fit 4 columns then it will be 4 columns with 3 rows, ect.

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

2 个解决方案

#1

First of all, this is stupid... but it does work... however, it only works in certain cases and involves a ton of silly numbers. Definitely not modular. FIDDLE (do I need to mention you'll need to resize your browser?)

首先，这很愚蠢……但它确实工作……然而，它只在某些情况下起作用，并且涉及大量愚蠢的数字。绝对不是模块化。FIDDLE(是否需要调整浏览器的大小?)

HTML

HTML

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

CSS

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 === */

I'm betting there is a nice jQuery something for this... If your table isn't being dynamically populated with different amounts of information - you could do something like this cosmetically or use some absolute positioning - columns is probably the way to go though. Good luck...

我打赌有一种很棒的jQuery工具……如果您的表没有动态地填充不同数量的信息—您可以做一些类似这样的修饰或使用一些绝对的定位—列可能是解决方法。祝你好运…

#2

you may use CSS column and start basicly styling your ul like this:

您可以使用CSS列并开始基本样式化您的ul如下:

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