Tenho uma sequencia de DIVs sendo geradas por um script.
Gostaria que elas ficassem uma em baixo da outra e quando atingisse a altura máxima da div pai, elas entrariam do lado .
Atualmente colocando-as para flutuar à esquerda ficam assim:
[ 0 ] [ 1 ]
[ 2 ] [ 3 ]
[ 4 ] [ 5 ]
[ 6 ] [ 7 ]
Mas gostaria que elas ficassem assim:
[ 0 ] [ 4 ]
[ 1 ] [ 5 ]
[ 2 ] [ 6 ]
[ 3 ] [ 7 ]
Código até o momento:
<style>
#pai{
width: 500px;
height: 300px;
}
.filhos{
float: left;
width: 200px;
}
</style>
<div id="pai">
<? for($x=0;$x<24;$x++){ ?>
<div class="filhos"><?=$x?></div>
<? } ?>
</div>
JSFiddle: https://jsfiddle.net/zgveahjp/