CSS3 Multi-Spalten-Layout
Die CSS3 Multi-Spalten-Layout ermöglicht eine einfache Definition mehrerer Textspalten - genau wie in den Zeitungen:
Täglich Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit- oder -moz- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
CSS3 Multi-column Eigenschaften
In diesem Kapitel werden Sie über die folgende mehrspaltige Eigenschaften erfahren:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
Erstellen Sie CSS3 mehrere Spalten
Die column-count - Eigenschaft gibt die Anzahl der Spalten ein Element sollte unterteilt werden.
Im folgenden Beispiel wird der Text in der teilen <div> Element in drei Spalten:
Beispiel
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Versuch es selber " CSS3 Geben Sie die Lücke zwischen Spalten
Die column-gap - Eigenschaft gibt den Abstand zwischen den Spalten.
Das folgende Beispiel gibt eine 40 Pixel Abstand zwischen den Säulen:
Beispiel
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Versuch es selber " CSS3 Spalte Regeln
Die column-rule-style - Eigenschaft gibt den Stil der Regel zwischen den Säulen:
Beispiel
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Versuch es selber " Die column-rule-width - Eigenschaft gibt die Breite der Regel zwischen den Säulen:
Beispiel
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Versuch es selber " Die column-rule-color - Eigenschaft gibt die Farbe der Regel zwischen den Säulen:
Beispiel
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Versuch es selber " Die column-rule - Eigenschaft ist eine zusammenfassende Eigenschaft für vor allem die Spalte-regel- * Eigenschaften festlegen.
Im folgenden Beispiel wird die Breite, Stil und Farbe der Regel zwischen den Säulen:
Beispiel
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Versuch es selber " Angeben, wie viele Spalten ein Element sollte Span
Die column-span Eigenschaft gibt an, wie viele Spalten ein Element sollte über erstrecken.
Im folgenden Beispiel wird angegeben , dass die <h2> Element über alle Spalten erstrecken sollte:
Beispiel
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Versuch es selber " Geben Sie die Spaltenbreite
Die column-width Eigenschaft gibt eine vorgeschlagene, optimale Breite für die Spalten.
Das folgende Beispiel gibt an, dass die vorgeschlagene, optimale Breite für die Spalten 100px sein sollte:
Beispiel
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Versuch es selber " CSS3 Multi-Spalten-Eigenschaften
Die folgende Tabelle listet alle Multi-Spalten-Eigenschaften:
| Eigentum | Beschreibung |
|---|---|
| column-count | Gibt die Anzahl der Spalten sollte ein Element unterteilt werden |
| column-fill | Gibt an, wie Spalten zu füllen |
| column-gap | Gibt den Abstand zwischen den Spalten |
| column-rule | Eine zusammenfassende Eigenschaft für alle säulen regel- * Eigenschaften festlegen |
| column-rule-color | Gibt die Farbe der Regel zwischen den Spalten |
| column-rule-style | Gibt den Stil der Regel zwischen den Spalten |
| column-rule-width | Gibt die Breite der Regel zwischen den Spalten |
| column-span | Gibt an, wie viele Spalten sollte ein Element über umspannen |
| column-width | Legt eine empfohlene optimale Breite für die Spalten |
| columns | Eine zusammenfassende Eigenschaft für die Einstellung Spaltenbreite und Spaltenzahl |