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:

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:

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:

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

Beispiel:

Breiten-, Stil- und Farbregeln zwischen Spalten angeben:

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