Hey.

I have a list <ul> , it contains many nested <li> with other lists. In general - a site map.

I need to place all <li> one below the other in the parent list and that they are arranged in columns depending on the height of the parent list.

How can i do this? Thank.

  • Maybe you will attach a small example with an illustration, there is some kind of shemkit, which result is not very clear. - IonDen pm
  • Here is the first thing that got into the pictures: druweb.ru/assets/images/WP/HTMLSitemap.gif - trauma

2 answers 2

Well, take a look at an example: http://jsfiddle.net/IonDen/mphk5vrs/ minimum modifications of the list and everything looks like on your screen.

 .sitemap { margin: 0; list-style-type: square; } .sitemap ul { list-style-type: square; }
  • Thanks for the answer, but I need the columns to be in a row if there is not enough height. All in one column, I myself can :) - trauma
  • You see, your question was very vague. To create columns you can do this: 1. Use CSS Multicolumn 2. Split into columns on the server 3. Use this polyfill for example: github.com/hamsterbacke23/multicolumn-polyfill - IonDen

For columns you can use .. columns o_O

http://caniuse.com/#feat=multicolumn

Choose the desired properties from column-count , column-gap , column-width and columns and use. Well, in general, everything look - maybe something else is useful.

http://htmlbook.ru/css/columns

  • Thanks for the advice, took advantage of the speakers - great stuff. But it turned out that all this should work and IE8 +, and the columns are supported only in IE10 +. Are there any other options? - trauma
  • one
    @trauma, scripts in hand. I can't come up with any styles suitable for IE8. - Qwertiy ♦
  • Used jQuery Columnizer - cool stuff, thanks for the advice. - trauma