Vertical wrap instead of horizontal

Navigation
1

When the content of a series of HTML elements with display inline does not fit into a fixed-size container , it is normal for content to be broken as text. That is, from left to right. Something like: 

div1 div2 div3 div4 div5 (quebra)
div6 div7 div8 div9 div10 (quebra)
div11 div12 div13...

I would like, instead of flowing from left to right, the elements flow from top to bottom (like display in block ). fill in the height of the container , the content suffered a break and a new column was populated to the right. Something like: 

div1      div6      div11
div2      div7      div12
div3      div8      div13
div4      div9      ...
div5      div10
(quebra)  (quebra)

Is it possible to do this only with HTML and CSS? My elements vary dynamically and I would like to be able to do something that does not involve modifying the layout programmatically.

    
asked by anonymous 04.06.2014 / 16:35

1 answer

2

You can use the column-count property to set the quantity of columns in your container , example: 

<div class='wrap'>
    <div class='col'>div1</div>
    <div class='col'>div2</div>
    <div class='col'>div3</div>
    <div class='col'>div4</div>
    <div class='col'>div5</div>
...
</div>

CSS 

.wrap {
-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;
 }

Example: JSFiddle

    
04.06.2014 / 23:59
Server load in real time JAAS - request.isUserInRole always returning false