CSS3-Tutorial – Mehrere Spalten

Hallo! Freunde, habt ihr das CSS3-Tutorial-Animationswissen aus unserem letzten Artikel verdaut? Das neue mehrspaltige Layout in CSS3 ist eine leistungsstarke Erweiterung des Blocklayoutmodus in herkömmlichen HTML-Webseiten. Diese neue Syntax ermöglicht WEB-Frontend-Entwicklern die einfache Anzeige von Text in mehreren Spalten.

CSS3 Mehrere Spalten:

Mit CSS3 können Sie mehrere Spalten erstellen, um Ihren Text anzuordnen – genau wie eine Zeitung!

In diesem Kapitel lernen Sie die folgenden mehrspaltigen Attribute kennen:

1 3. Spaltenregel.

Browserunterstützung:

Internet Explorer 10 und Opera unterstützen mehrspaltige Attribute.

Firefox erfordert das Präfix -moz-.

Chrome und Safari erfordern das Präfix -webkit-.

Hinweis: Internet Explorer 9 und früher unterstützen keine mehrspaltigen Eigenschaften.

CSS3 erstellt mehrere Spalten:

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

Beispiel:

Fügen Sie den Text ein im div-Element In drei Spalten unterteilt:

CSS3 gibt die Lücke zwischen Spalten an:

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

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

Beispiel:

Geben Sie einen Abstand von 40 Pixeln zwischen den Spalten an:

CSS3-Spaltenregeln:

Die Eigenschaft „column-rule“ legt die Regeln für Breite, Stil und Farbe zwischen den Spalten fest.

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

Beispiel:

Breiten-, Stil- und Farbregeln zwischen Spalten angeben:

Neue mehrspaltige Eigenschaften:

Tabelle unten Alle Konvertierungsattribute sind aufgeführt:

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

Das Obige ist der Inhalt des CSS3-Tutorials – mehrspaltig. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!