HTML列表元素从上到下，然后从左到右

Question

I want to do a list of a bunch of items. The height is fixed. So when the list hits the bottom, I want it to wrap around and start a new column. Is there a way, without knowing the height of each item, to do this in css? That way the overflow will occur horizontally.

Answer 1

Check this CSS Trick

the key is this CSS:

    ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

It will do exactly what you ask.

Answer 2

我想不出一种使用CSS来完成此操作的方法，但是如果您不反对jquery，请查看以下内容： http : //welcome.totheinter.net/columnizer-jquery-plugin/

Answer 3

There is a proposed CSS 3 property for multicolumns (see Quirksmode.org -- Columns for examples using the proprietary properties), but that's not supported in all modern browsers yet. Even so, I'm not sure the support is as repeatable across the browsers that do support it as one might hope.

Answer 4

You could use CSS3 columns.

Here's a fiddle: fiddle and here's the WC3 spec

Answer 5

why don't you for JavaScript. It is simple and compatible with all browser

If you go for CSS3 then IE (The Useless browser) Will not support it.

I will just give you a hint for javascript

just Calculate Height of your Parent Div

   var height = document.getElementById("ParentDiv").style.height;

Create Child div with same height and add your Divs inside it new child div.

If height of child div is get exceeds that parent div

Create another child div and continue the process.

This process is hectic but will support to all browser

When jQuery-plugins are Good option but I personally feel that if they can do it you can do it.

All the best