Div one on top of the other

Question

I have a sequence of Divs being generated by a script.
I would like them to be below each other and when I reached the maximum height of the father, they would enter the side .

Currently putting them to float left stay like this:

[ 0 ] [ 1 ]
[ 2 ] [ 3 ]
[ 4 ] [ 5 ]
[ 6 ] [ 7 ]

But I’d like them to stay that way:

[ 0 ] [ 4 ]
[ 1 ] [ 5 ]
[ 2 ] [ 6 ]
[ 3 ] [ 7 ]

Code to date:

<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/

Answer 1

You can do it this way with jQuery:

$(document).ready(function() {
    var divPai = $("#idPai");

    if (divPai.height() <= 200) {
        divPai.addClass("umaColuna").removeClass("duasColunas");
    } else {
        divPai.addClass("duasColunas").removeClass("umaColuna");
    }
});

Basically what this is going to do is:

If the div id="divPai" is less than or equal to 400px height (or whatever the value you want is the maximum value set for the height of the parent div), will add a class called umaColuna at the #divPai:

<div id="divPai" class="umaColuna">

and if the value is higher, add a class duasColunas:

<div id="divPai" class="duasColunas">

Then to make the modification and transaction to divide the content within the #divPai for him to keep one or two columns depending on this class change above, just create the CSS code for the classes as follows:

/* Personaliza o espaçamento entre as colunas */
#idPai {
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 15px;
}

/* Divide o conteúdo dentro da #divPai em uma coluna */
.umaColuna {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

/* Divide o conteúdo dentro da #divPai em duas colunas */
.duasColunas {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.classFilho {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-color: #DDD;
    margin: 0 2px 15px 2px;
/* O código abaixo evita problemas de posicionamento das divs filhos */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

And the HTML code will be something like:

<div id="idPai">
    <div class="classFilho">0</div>
    <div class="classFilho">1</div>
    <div class="classFilho">2</div>
    <div class="classFilho">3</div>
</div>

Here’s an online jsFiddle example: http://jsfiddle.net/6sqmsLvv/
Click on the button Add new div Son in the example link, to add new divs son.

Answer 2

RESOLVED !
According to the comment of the devgaspa.
I found it simpler and as solved, nor tested other methods.
THANK YOU

Using the flex-box property of css3 I was able to do what you needs, but the width of the father div does not accompany the children, it is fixed, maybe to fix this. Jsfiddle: jsfiddle.net/devgaspa/zgveahjp/2 Reference: developmentoparaweb.com/css/flexbox Can i use?: caniuse.com/#feat=flexbox - devgaspa

.pai {
    background: orange;
    
    display: flex;
    
    flex-direction: column;
    flex-wrap: wrap;
    
    height: 500px;
    width: 0px;
}

.filhos {
    border: 1px solid lightgray;
    box-sizing: border-box;
   height: 100px;
    width: 100px;
}

<div class="pai">     
    <div class="filhos">0</div>
    <div class="filhos">1</div>
    <div class="filhos">2</div>
    <div class="filhos">3</div>
    <div class="filhos">4</div>
    <div class="filhos">5</div>
    <div class="filhos">6</div>
    <div class="filhos">7</div>
    <div class="filhos">8</div>
    <div class="filhos">9</div>
    <div class="filhos">10</div>
</div>

Answer 3

so it doesn’t go beyond 300px tag

 max-height: 300px;