So verwenden Sie CSS3, um das Wasserfall-Flow-Layout zu implementieren

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung des Wasserfall-Flow-Layouts mit CSS3 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Früher war für die Verwendung des Wasserfallflusses die Verwendung von js erforderlich, aber jetzt kann dies mit CSS3 problemlos implementiert werden.

Meisterpunkte:

1. Column-Count teilt den Text in p in mehrere Spalten.

2. Column-Width gibt die Spaltenbreite an 🎜>

3. Spaltenlücke gibt Spaltenlücke an

4. Zeilenumbrüche innerhalb von Elementen vermeiden und neue Spalten generieren

Hinweis: Internet Explorer 9 und frühere IE Versionsbrowser unterstützen das Column-Count-Attribut nicht.

column-count-Attribut gibt die Anzahl der Spalten an, durch die Elemente getrennt werden sollen:

p
{
-moz-column-count:3;  /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

column-gap-Attribut gibt die Lücke zwischen Spalten an :

p
{
-moz-column-gap:40px;  /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

column-rule-Attribut legt die Breiten-, Stil- und Farbregeln zwischen Spalten fest:

p
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

Beispiel:

rrree

Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird. Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Informationen zur Implementierung eines mehrzeiligen und mehrspaltigen Layouts mit CSS

Verwendung CSS zum Implementieren von Mouse-Over. Der Effekt der Drehung von bewegten Symbolen

Verwendung von CSS3 zum Erstellen eines Codes für einen Schmetterling, der mit den Flügeln schlägt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um das Wasserfall-Flow-Layout zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!