CSS3 mehrspaltigen
CSS3 Text-Inhalte können wie eine Zeitung mehrspaltigen Layout, die folgenden Beispiele entworfen werden:
Dieses Tutorial - Wissenschaft ist nicht nur Technik, sondern auch ein Traum! Dieses Tutorial (www.w3big.com) bietet die vollständigste Programmiertechnologie basiert Tutorial die Grundlagen von HTML stellt, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL und anderen Programmiersprachen. Aber die Seite bietet auch eine Reihe von Beispielen online, beispielhaft, Sie besser Programmierung lernen können.
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Methode Versionsnummer zu unterstützen.
Unmittelbar nach Ende der Browser -webkit- Nummer oder -moz- angegebenen Präfix.
| Immobilien | |||||
|---|---|---|---|---|---|
| column-count | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| Spalte-Lücke | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| Spalte-Regel | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| column-rule-Farbe | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| column-rule-Stil | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| column-rule-Breite | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| Spaltenbreite | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
CSS3 mehrspaltigen Eigenschaften
In diesem Kapitel werden wir ein paar mehr Spalte Eigenschaften von CSS3 lernen:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 mehrere Spalten zu erstellen
column-count - Attribut gibt die Anzahl der Spalten aufgeteilt werden müssen.
Das folgende Beispiel <div> Element im Text ist in drei Teile unterteilt:
Beispiele
-webkit-column-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
column-count: 3;
}
Versuchen »
CSS3 mehrspaltigen Lücke zwischen den Spalten und Spalten
column-gap - Eigenschaft gibt den Abstand zwischen den Spalten und Spalten.
Das folgende Beispiel wird angegeben, um die Lücke zwischen der Säule und die Spalte 40 Pixel:
Beispiele
-webkit-column-Lücke: 40px; / * Chrome, Safari, Opera * /
-moz-column-Lücke: 40px; / * Firefox * /
Spalte-Lücke: 40px;
}
Versuchen »
CSS3 Spaltenränder
column-rule-style - Eigenschaft gibt die Grenze Stil Spalten zwischen den Säulen:
Beispiele
-webkit-column-rule-style: solid; / * Chrome, Safari, Opera * /
-moz-column-rule-style: solid; / * Firefox * /
column-rule-style: solid;
}
Versuchen »
column-rule-width - Attribut gibt die Rahmenstärke der beiden:
Beispiele
-webkit-column-rule-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
column-rule-width: 1px;
}
Versuchen »
column-rule-color Attribut gibt die Farbe der Grenze der beiden:
Beispiele
-webkit-column-rule-Farbe: hellblau / * Chrome, Safari, Opera * /
-moz-column-rule-Farbe: hellblau / * Firefox * /
column-rule-Farbe: hellblau;
}
Versuchen »
column-rule Eigenschaft ist eine Abkürzung für alle säulen regel- * Eigenschaften.
Im folgenden Beispiel wird die Spalte direkt für die Rahmenstärke, Farbe und Stil:
Beispiele
-webkit-column-rule: 1px solid hellblau / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid hellblau / * Firefox * /
Spalte-Regel: 1px solid hellblau;
}
Versuchen »
Wie viele Spalten über das angegebene Element
Das folgende Beispiel gibt die <h2> -Element in allen Spalten:
Beispiele
-webkit-column-Spanne: alle; / * Chrome, Safari, Opera * /
Spalte Spanne: alle;
}
Versuchen »
Gibt die Breite der Spalten
column-width Attribut gibt die Breite der Spalte.
Beispiele
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
Spalte-width: 100px;
}
Versuchen »
CSS3 mehrspaltigen Eigenschaften
Die folgende Tabelle listet alle Attribute von CSS3 Multi-Spalte:
| Immobilien | Beschreibung |
|---|---|
| column-count | Die Anzahl der Spalten angegebene Element sollte geteilt werden. |
| column-fill | Gibt an, wie Spalten zu füllen |
| Spalte-Lücke | Gibt den Abstand zwischen den Spalten und Spalten |
| Spalte-Regel | Alle säulen regel- * Kurzschrift-Eigenschaft |
| column-rule-Farbe | Gibt die Farbe an der Grenze zwischen den beiden |
| column-rule-Stil | Geben Sie den Stil der Grenze zwischen den beiden |
| column-rule-Breite | Gibt die Dicke der Grenze zwischen den beiden |
| Spalte Spanne | Gibt an, wie viele Spalten Element zu überqueren |
| Spaltenbreite | Gibt die Breite der Spalten |
| Spalten | Einstellen Spaltenbreite und Spaltenzahl Stenografie |