CSS3-Mehrspaltigkeit

Mit CSS3 können Textinhalte in einem zeitungsähnlichen mehrspaltigen Layout gestaltet werden, wie im folgenden Beispiel:

Example – Was Sie lernen, ist nicht nur Technologie, sondern auch Träume! Example (www.example.com) bietet die umfassendsten Grundlagen-Tutorials für Programmiertechnologie. Einführung in das Grundlagenwissen verschiedener Programmiersprachen wie HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL usw. Gleichzeitig bietet diese Website auch eine große Menge an Online-Beispielen. Durch Example können Sie besser lernen und Kurse bearbeiten.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Methode unterstützt.

Das unmittelbar auf die Zahl folgende -webkit- oder -moz- ist das Präfix für den angegebenen Browser.

Eigenschaft
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1

CSS3-Mehrspalten-Eigenschaften

In diesem Abschnitt lernen wir die folgenden CSS3-Mehrspalten-Eigenschaften kennen:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3: Mehrere Spalten erstellen

column-countDie Eigenschaft legt die Anzahl der Spalten fest, in die aufgeteilt wird.

Das folgende Beispiel teilt das <div>-Element in 3 Spalten auf:

Beispiel

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

Selbst ausprobieren »

Der Abstand zwischen Spalten in CSS3-Mehrspalten.

column-gapDie Eigenschaft gibt den Abstand zwischen Spalten an.

Das folgende Beispiel legt den Abstand zwischen Spalten auf 40 Pixel fest:

Beispiel

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

Selbst ausprobieren »

CSS3-Spaltenrahmen

column-rule-styleDie Eigenschaft gibt den Rahmenstil zwischen Spalten an:

Beispiel

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

Selbst ausprobieren »

column-rule-widthDie Eigenschaft gibt die Dicke des Rahmens zwischen zwei Spalten an:

Beispiel

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

Selbst ausprobieren »

column-rule-colorDie Eigenschaft legt die Farbe des Rahmens zwischen zwei Spalten fest:

Beispiel

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

Selbst ausprobieren »

column-ruleDie Eigenschaft ist eine Kurzform für alle column-rule-*-Eigenschaften.

Das folgende Beispiel legt die Dicke, den Stil und die Farbe des Rahmens zwischen den Spalten fest:

Beispiel

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

Selbst ausprobieren »

Geben Sie an, über wie viele Spalten sich ein Element erstreckt

Das folgende Beispiel gibt an, dass das <h2>-Element alle Spalten überspannt:

Beispiel

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

Selbst ausprobieren »

Spaltenbreite angeben

column-widthDie Eigenschaft gibt die Breite der Spalten an.

Beispiel

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

Selbst ausprobieren »

CSS3-Mehrspalten-Eigenschaften

Die folgende Tabelle listet alle CSS3-Mehrspalten-Eigenschaften auf:

Eigenschaft Beschreibung
column-count Gibt die Anzahl der Spalten an, in die das Element unterteilt werden soll.
column-fill Festlegen, wie Spalten gefüllt werden
column-gap Gibt den Abstand zwischen Spalten an.
column-rule Kurzschreibweise für alle column-rule-*-Eigenschaften
column-rule-color Gibt die Farbe des Rahmens zwischen zwei Spalten an.
column-rule-style Gibt den Stil des Rahmens zwischen zwei Spalten an.
column-rule-width Gibt die Dicke des Rahmens zwischen zwei Spalten an.
column-span Gibt an, über wie viele Spalten sich das Element erstrecken soll.
column-width Spaltenbreite angeben
columns Kurzschreibweise für column-width und column-count.
Weitere Erweiterungen