The number of blocks each time is different, from 1 to 40. You need to arrange them like this:

1 7 2 8 3 9 4 ... 5 6

The number of columns can be from 1 to 5. The difficulty is that without using scripts, standard html + css to achieve this. Blocks of different heights, and when the next block does not fit below (container height 380px), we start a new column.

In html, I have it all like this:

  <div class="test"> <a href="" class="c">Первый</a> <a href="" class="c">Второй</a> <a href="" class="c">Третий</a> <a href="" class="c">Четвертый</a> <a href="" class="c">Пятый</a> <a href="" class="c">Шестой</a> <a href="" class="c">Седьмой</a> .... </div>

3 answers 3

The CSS columns property will help you.

 .test { -moz-columns: 50px 5; -webkit-columns: 50px 5; columns: 50px 5; height: 200px; }

Remember, this property only appeared in CSS3, so older browsers do not support it.

http://jsfiddle.net/RM4uL/2/

  • The thing is cool, but it aligns the columns in height, trying to make them as much as indicated. - knes
  • The fact of the matter is that there is no support for older browsers. It is necessary to do something universally. But without scripts. - MatthewP
  • Without scripts + for old browsers will not work. It is for this that scripts and new browsers are released. - knes

I'm afraid you'll have to crutch.

 div.wrapper { width:200px; height:100px; margin-top: 200px; background-color:yellow; color: #000; /* Rotate div */ transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ } div.inner { float: left; width:20px; height:10px; background-color:blue; margin-top: 50px; color: #000; /* Rotate div */ transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ } <div class="wrapper"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>

The chip: you first turn all the divs backwards, then you unfold a common block again. Complete perverted. But it should work like you said.

NB This will also work only in new browsers.

    Use display: flex;

    Here is the full documentation: http://frontender.info/a-guide-to-flexbox/

     .category-list { list-style: none; height: 100px; border: 1px solid red; display: flex; flex-direction: column; flex-wrap: wrap } .category-list li { page-break-inside: avoid; break-inside: avoid; } 
     <ul class="category-list clearfix"> <li class="category-item">1</li> <li class="category-item">2</li> <li class="category-item">3</li> <li class="category-item">4</li> <li class="category-item">5</li> <li class="category-item">6</li> <li class="category-item">7</li> <li class="category-item">8</li> <li class="category-item">9</li> <li class="category-item">10</li> <li class="category-item">11</li> <li class="category-item">12</li> </ul>