Wymuś murowanie/podobne działanie, aby zignorować luki w przepływie i wypełnieniu.

Question

Kamieniarstwo/Izotop/Freetile i reszta wykonują świetną robotę w pozycjonowaniu absolutnym elementów w siatce/pojemniku.

Jednak gdy element zajmuje całą szerokość siatki/kontenera, tworzy masywne luki, co nie jest akceptowalnym wynikiem.

Oto jsfiddle do mojego problemu: http://jsfiddle.net/QNf3A/1/

Jest wystarczająco dużo miejsca na górze czerwonego div umieścić zieloną. Jednak różne biblioteki mają tendencję do respektowania przepływu, w przeciwieństwie do filozofii "nie pozostawiaj luki".

Czy ktoś wie o alternatywnej bibliotece js lub podobnej sztuczce, aby uniknąć luk?

-

Kod z jsfiddle ...

HTML:

<div id="container"> 
    <div class="block half"></div> 
    <div class="block full"></div> 
    <div class="block half"></div> 
    <div class="block half"></div> 
    <div class="block half"></div> 
</div> 

CSS:

#container{ 
    width: 600px; 
    background-color: #EEE; 
} 
.block{ 
    float: left; 
} 
.half{ 
    width: 300px; 
    height: 100px; 
    background-color: #CFC; 
} 
.full{ 
    width: 600px; 
    height: 100px; 
    background-color: #FCC; 
} 

JS/jQuery:

$(function($) { 

    $('#container').masonry({ 
    itemSelector: '.block', 
    columnWidth: 300 
    }); 

}); 

Answer 1

Znalazłem to:
https://github.com/DrewDahlman/Mason

i wydaje się rade.

Answer 2

Nie wiem, czy ta odpowiedź jest spóźniona, czy nie, ale sprawdź Packery. Jest to rodzaj wtyczki murowane, że robi tylko to:

https://github.com/metafizzy/packery

Answer 3

Lepszym rozwiązaniem jest pakowanie 2-wymiarowej. Idealny murarstwo http://www.drewdahlman.com/meusLabs/?p=218 może rozwiązać niektóre problemy związane z lukami.