Jak zignorować wstawiane bloki marginesów z różnymi wysokościami?

Question

Mam problem, w którym bloki układają się w stos o 2, a kolejne 2 bloki zaczynają się na końcu pierwszych 2 bloków. Jak pokazano w 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; 
} 

wyjściowa:

Uwaga:To nie zajmuje białej przestrzeni utworzonej przez prawy górny div.

Oczekiwany/chciał wyjście:

Uwaga:To czyni stosowanie spacji.

Mam świadomość, że jest to możliwe z 2 kolumnami, ale nie chcę używać 2 kolumn. Ponieważ muszę mieć możliwość usunięcia niektórych elementów div bez nierównej zawartości w kolumnach.

Answer 1

Miałem ten sam problem na stronie internetowej, którą stworzyłem. użyłem murarskich do rozwiązania, że: http://masonry.desandro.com/

Answer 2

można spróbować użyć column-count własność,

mieć świadomość, że produkty zostaną uporządkowane w kolejności malejącej kolumna.

fiddle

Answer 3

Marka div z więcej treści pływaka po prawej dodając drugą klasę do niego.

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