Układ w stylu muru TYLKO z CSS

Question

Jak widać na zdjęciu, każde pudełko ma inną wysokość i są tam pudełka o podwójnej szerokości.

Czy to możliwe, aby utworzyć układ murowane stylu tylko z CSS?

Answer 1

Dzięki wsparciu CSS3 można to zrobić:

http://jsfiddle.net/huAxS/2/

.container { 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    column-count: 2; 
    column-gap: 10px; 
    width: 360px; 
} 

.container div { 
    display: inline-block; 
    width: 100%; 
    background-color: red; 
}​ 

Bez wsparcia CSS3, trzeba uciekać się do js niestety.

Answer 2

Pracuję teraz nad stroną z tym samym rodzajem układu, dwiema kolumnami ze sporadycznym podwójnym szerokim polem. To, co robię, to oddzielić podwójną szerokość od reszty treści. Na przykład:

<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="double-wide"> 
</div> 
<div class="two-columns"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Następnie można zastosować rozwiązanie kolumny CSS3 tylko do klasy two-columns. Jeśli potrzebujesz wsparcia dla IE9, nie będziesz musiał dodawać numeru JavaScript fallback.