Come ignorare il margine che i blocchi in linea creano con altezze diverse?

Question

Ho un problema in cui i blocchi si impilano per 2 e i successivi 2 blocchi iniziano alla fine dei primi 2 blocchi. Come mostrato in this JSFiddle demo.

HTML:

<div class="container"> 
    <div class="inline"> 
    A div with less content than that one > 
    </div> 
    <div class="inline"> 
    A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3. 
    </div> 
    <div class="inline"> 
    Inline 3 
    </div> 
    <div class="inline"> 
    Inline 4 
    </div> 
</div> 

CSS:

.container { 
    width:600px; 
    background-color:rgb(40,40,40); 
} 

.inline { 
    width:calc(50% - 22px); 
    display:inline-block; 
    vertical-align:top; 
    color:white; 
    background-color:#e74c3c; 
    text-align:center; 
    margin:5px 10px; 
} 

uscita:

Nota:Questo non occupa lo spazio bianco creato dal div in alto a destra.

atteso/wanted uscita:

Nota:Questo non fanno uso del spazi bianchi.

Sono consapevole che questo è possibile con 2 colonne, ma non voglio utilizzare 2 colonne. Perché devo essere in grado di rimuovere alcuni div senza avere contenuti diversi nelle colonne.

Answer 1

Ho avuto lo stesso problema sul sito Web che ho creato. ho usato in muratura per risolvere questo: http://masonry.desandro.com/

Answer 2

si può provare a utilizzare column-count proprietà,

essere a conoscenza gli elementi verranno ordinati in ordine di colonna discendente.

fiddle

Answer 3

Fai il div con più contenuti galleggiante a destra con l'aggiunta di una seconda classe ad esso.

HTML

<div class="inline right"> 
    A div with more content than the one on the left. Now Inline 3 goes 
    down to where this div ends. I want to move it up however, so it's 
    right under the div that's above Inline 3. 
</div> 

CSS

.right { 
    float: right; 
} 

fiddle