New here :)
Let's say you have ul element with a number of li elements inside. The display property of li elements is inline block. Li elements have fixed width, but various height. By default they follow each other from left to right in a row, and then, when there is not enough room in the row, they will move below (below the highest element) and continue from the left. But what if I need every bottom element to move right under the corresponding top element, so there is no white space?
It's really difficult to put into words, so it's best to look at the fiddles to understand what I'm trying to achieve: default layout, desired layout. The code is simple, really:
<div class="container">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
<div class="b4">4</div>
<div class="b5">5</div>
<div class="b6">6</div>
</div>
My question is this: can it be done without using JS? The only way that I can think of is by relatively positioning the elements, but it doesn't seem like the right way, because what if the height of each element is not known?
Note: the IE support should be IE9 and higher. It's important that the order of the elements is exactly as shown in the fiddles (note the number in each element).
Is it even possible to do it? Any help is appreciated. Thanks in advance.
