Maurer-Layout nur mit CSS - CSS, HTML5, CSS3

Wie Sie auf dem Bild sehen können, hat jede Box eine andere Höhe und es gibt einige Boxen mit doppelter Breite.

Ist es möglich, ein Mauerwerk-Layout nur mit CSS zu erstellen?

Antworten:

Mit CSS-Unterstützung können Sie dies tun:

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;
}​

Ohne CSS-Unterstützung müssen Sie leider auf js zurückgreifen.

Ich arbeite gerade an einer Website mit der gleichen Art von Layout, zwei Spalten mit der gelegentlichen Double-Wide-Box. Was ich mache, ist nur die Doppel-Wide vom Rest des Inhalts zu trennen. Zum Beispiel:

<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>

Dann können Sie die CSS3-Spaltenlösung nur auf die two-columns Klasse. Wenn Sie IE9 unterstützen müssen, müssen Sie leider eine hinzufügen JavaScript-Fallback.