Jak umieścić elementy o różnych rozmiarach na jednej stronie, unikając zbyt wielu przerw między nimi?

Question

Mam zestaw prostokątów o różnej wielkości i chcę, aby umieścić je obok siebie, więc nie są tak małe luki w tam jak to możliwe:

ale dla:

<div class="box" > 
    <div class="item item-001" ></div> 
    <div class="item item-003" ></div> 
    <div class="item item-005" ></div> 
    <div class="item item-002" ></div> 
    <div class="item item-004" ></div> 
    <div class="item item-001" ></div> 
    <div class="item item-001" ></div> 
    <div class="item item-003" ></div> 
    <div class="item item-004" ></div> 
    <div class="item item-001" ></div> 
</div> 

i

div.box { 
    width: 100%; 
    height: 100%; 
    display: block; 
    border: 1px solid #EEE; 
    padding: 3px; 
} 

div.item { 
    display: inline-block; 
    border: 1px solid orange; 
    margin: 3px; 
    width: 100px; 
} 
div.item-001 { 
    height: 100px; 
} 
div.item-002 { 
    height: 150px; 
} 
div.item-003 { 
    height: 50px; 
} 
div.item-004 { 
    height: 250px; 
} 
div.item-005 { 
    height: 350px; 
} 

to, co mam:

Czy istnieje sposób, w jaki mogę osiągnąć ten wynik za pomocą zwykłego css? Chcę uniknąć css3 i javascript i chcę, aby wynik działał na starszych przeglądarkach. Jeśli to nie jest możliwe, to chciałbym wiedzieć, czy jest to możliwe z css3, a jeśli nie, to sądzę, że spróbuję javascript.

link, aby bawić: http://jsfiddle.net/hamidsafdari/aa10xzzt/1/

Answer 1

Jeśli używasz jQuery i nie chcesz, aby zrobić wszystko sam, gdy ktoś ma już można przyjrzeć się tej wtyczki, które mogą pomóc: jQuery Masonry

ten wtyczka buduje układ strony podobny do tego, którego szukasz. Ja, który poprosiłem o uniknięcie kodu JavaScript, wiem, ale w ten sposób będziesz mieć pewność, że masz awarię dla starszych przeglądarek.

Answer 2

Zastosuj font-size:0 do elementów dominujących i usunąć margin z elementów podrzędnych.

div.box { 
width: 100%; 
height: 100%; 
display: block; 
border: 1px solid #EEE; 
padding: 3px; 
font-size:0;   
} 

div.item { 
display: inline-block; 
border: 1px solid orange; 
} 

DEMO

Answer 3

Ponieważ elementy mają tę samą szerokość, można użyć układu wielokolumnowego i umieścić elementy jeden pod drugim.

div.box { 
    width: 100%; 
    height: 100%; 
    display: block; 
    border: 1px solid #EEE; 
    padding: 3px; 
    -webkit-column-count: 5; 
    -moz-column-count: 5; 
    column-count: 5; 
} 

Może być jednak konieczna zmiana liczby kolumn.

Fiddle

Answer 4

div.vertical{ 
    height: 150px; 
    width: 100px; 
} 
div.full{ 
    height: 300px; 
    width: 100px; 
} 

Fiddle

Spróbuj powyżej skrzypce