Layout im Mauerwerksstil NUR mit CSS

Lesezeit: 2 Minuten

Bernat

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

Layout

Ist es möglich, ein Layout im Mauerwerksstil nur mit CSS zu erstellen?

Darauf können Sie sich beziehen: sickdesigner.com/index.php/2011/html-css/… Wenn einige Browser css3 nicht unterstützen, müssen Sie das Skript jquery-masonry verwenden. Weitere Referenz: designshack.net/articles/css/masonry

– Benutzer1512616

24. August 2012 um 22:12 Uhr
Hey Kumpel, ich erinnere mich an diese Seite. Ich weiß nicht, ob du sie überprüfen möchtest. Ich erinnere mich wirklich nicht, ob sie mit JS oder reinem CSS funktioniert hat, aber mit Sicherheit wird kein Mauerwerk verwendet leica-oskar-barnack-award.com ich hoffe es hilft

– Paradies

24. August 2012 um 23:15 Uhr
Wo ist dein Code, den du versucht hast? Wo ist Ihre Online-Sandbox oder jsfiddle? Wenn Sie auf SO gesucht hätten, hätten Sie herausgefunden, dass es nicht möglich ist, Masonry mit CSS zu replizieren und es browser- und geräteübergreifend funktionieren zu lassen.

– Systembolaget

25. August 2012 um 12:37 Uhr
Beruhige dich und atme langsam… 😉

– Bernat

26. August 2012 um 17:34 Uhr
Mögliches Duplikat des Masonry-Layouts mit CSS-Raster

– TylerH

25. August 2017 um 19:41 Uhr

Mit CSS3-Unterstützung könnten Sie dies tun:

.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 CSS3-Unterstützung müssen Sie leider auf js zurückgreifen.

Wie gesagt, es gibt einige Boxen mit doppelter Breite! (in diesem Fall 2 Spalten). Und ja, ich kann CSS3 verwenden!

– Bernat

24. August 2012 um 22:11 Uhr
Ich habe es lange erforscht, es ist einfach nicht mit CSS allein möglich.

– Alt

24. August 2012 um 22:12 Uhr
Das Problem bei dieser Lösung besteht darin, dass die Elemente von oben nach unten und von links nach rechts angeordnet sind, während man normalerweise (kulturelle Annahmen entschuldigt) ein Layout von links nach rechts und von oben nach unten erwartet. Dies ist der Showstopper für die üblichen CSS3-Spalten-basierten Empfehlungen.

– Benutzer713516

27. August 2013 um 10:03 Uhr

Ich arbeite gerade an einer Website mit der gleichen Art von Layout, zwei Spalten mit gelegentlichen Kästchen mit doppelter Breite. Ich trenne einfach die doppelte Breite vom Rest des Inhalts. 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 einfach auf die anwenden two-columns Klasse. Wenn Sie IE9 unterstützen müssen, müssen Sie leider a hinzufügen JavaScript-Fallback.

8689400cookie-checkLayout im Mauerwerksstil NUR mit CSS

#CSS #html