Układ w stylu muru TYLKO z CSS - css, html5, css3

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

Czy możliwe jest stworzenie układu murarskiego tylko z CSS?

Odpowiedzi:

Dzięki obsłudze css3 możesz 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 dla css3, musisz uciekać się do js niestety.

Pracuję teraz nad witryną z tym samym rodzajem układu, dwiema kolumnami ze sporadycznym podwójnym szerokim polem. Po prostu oddzielam podwójną szerokość od reszty treści.

<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żesz zastosować rozwiązanie kolumny CSS3 tylko do two-columns klasa. Jeśli potrzebujesz wsparcia dla IE9, nie będziesz musiał dodawać Obsługa JavaScriptu.