Wie kann ich mit CSS (und JavaScript-Alternativen) ein Layout im Mauerwerksstil erstellen?

Layouts im Mauerwerksstil mit CSS erstellen

Viele Webdesigner streben danach, Layouts zu erstellen, bei denen Inhaltsblöcke in Spalten angeordnet sind, wobei sich jeder Block anpasst auf seine eigene Höhe und behält dabei ein einheitliches und ästhetisch ansprechendes Erscheinungsbild bei. Dies wird als „Maurerry-Style-Layout“ bezeichnet.

In der Vergangenheit war CSS allein nicht in der Lage, diesen Effekt effektiv zu erzielen. Mit dem Aufkommen von CSS3 haben wir jedoch jetzt eine einfache Lösung.

CSS3-Lösung

CSS3 führt das Konzept mehrspaltiger Layouts ein und ermöglicht es Entwicklern, das festzulegen Anzahl der Spalten und der Abstand zwischen ihnen. Durch Festlegen der Eigenschaften „column-count“ und „column-gap“ können wir ein Layout im Mauerwerksstil erstellen.

Der folgende CSS-Code definiert beispielsweise einen Container mit zwei Spalten und einem Abstand von 10 Pixeln dazwischen:

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

Jedes Element im Container wird dann gezwungen, 100 % der verfügbaren Breite innerhalb einer Spalte einzunehmen. Dies bedeutet, dass Blöcke mit unterschiedlichen Höhen vertikal gestapelt werden, wodurch das gewünschte Erscheinungsbild im Mauerwerksstil entsteht.

Nicht-CSS3-Lösung

Wenn Ihr Projekt CSS3 nicht unterstützt, können Sie Sie müssen JavaScript verwenden, um ein Layout im Mauerwerksstil zu erreichen. Es stehen mehrere JavaScript-Bibliotheken zur Verfügung, z. B. Masonry und Isotope, die zum Erstellen dieser Layouts verwendet werden können.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS (und JavaScript-Alternativen) ein Layout im Mauerwerksstil erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!