CSS3Grundtutorials

CSS3 Box-Größe(box-sizing)CSS3 Animationen(Animations)

CSS3 mehrspaltiges Layout

Verwenden Sie CSS3，um den Textinhalt eines Elements in mehrere Spalten zu teilen.

Erstellen Sie ein mehrspaltiges Layout

CSS3Der Modul für mehrspaltiges Layout wurde eingeführt, um mehrere Spaltenlayout auf einfache und effektive Weise zu erstellen. Jetzt müssen Sie keine Floating-Boxen verwenden, um Layouts zu erstellen, wie sie in Zeitschriften und Zeitungen zu sehen sind. Dies ist ein Beispiel für die Verwendung von CSS3Ein einfaches Beispiel für die Funktion der mehrspaltigen Layout, bei der einige Texte in drei Spalten unterteilt werden.

Beispiel

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

Testen Sie es heraus‹/›

Spaltenzahl oder Breite einstellen

CSS-Eigenschaft, column-count und column-width angibt, ob und wie viele Spalten angezeigt werden. column-count-Eigenschaft legt die Anzahl der Spalten im multicol-Element fest, während column-Die width-Eigenschaft legt die erforderliche Breite der Spalte fest.

Beispiel

p {
　　　　-webkit-column-width:　150px;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-width:　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width:　150px;　
}

Testen Sie es heraus‹/›

Anmerkung:column-width legt die beste Breite der Spalte fest. Allerdings kann die tatsächliche Breite der Spalte je nach verfügbarem Raum breiter oder schmaler werden. Dieses Attribut sollte nicht mit column-und die count-Eigenschaft gemeinsam verwenden。

verwenden, um den Spaltenabstand zu setzen

Sie können die column-Die gap-Eigenschaft bestimmt den Abstand zwischen den Spalten. Der gleiche Abstand wird zwischen den Spalten angewendet. Der Standardabstand ist normal, was1em.

Beispiel

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
}

Testen Sie es heraus‹/›

Regeln für die Spalten festlegen

Sie können auch column-Die rule-Eigenschaft fügt zwischen den Spalten eine Linie, die Regel, hinzu. Es ist eine Kurzschreibweise, um die Breite, den Stil und die Farbe der Regel in einer einzigen Anweisung zu setzen. Die column-Die rule-Eigenschaft verwendet die gleichen Werte wie border und outline.

Beispiel

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px solid red;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px solid red;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px solid red;
}

Testen Sie es heraus‹/›

Hinweis:Die Breite der Spaltenregeln beeinflusst die Breite der Spaltenbox nicht, aber wenn die Breite der Spaltenregeln größer als der Abstand ist, können sich benachbarte Spaltenboxen mit der Regel überlappen.

CSS3Mehrfachspalten-Eigenschaften

Nachstehend ist eine kurze Übersicht über alle mehrspaltigen Eigenschaften:

Eigenschaft	Beschreibung
column-count	Bestimmt die Anzahl der Spalten innerhalb eines mehrspaltigen Elements.
column-fill	Bestimmt, wie der Inhalt zwischen den Spalten verteilt wird.
column-gap	Bestimmt den Abstand zwischen den Spalten.
column-rule	Bestimmt die Linie oder das Lineal, das zwischen den Spalten gezeichnet wird.
column-rule-color	Bestimmt die Farbe der Regel zwischen den Spalten.
column-rule-style	Bestimmt den Stils der Regel zwischen den Spalten.
column-rule-width	Bestimmt die Regelbreite zwischen den Spalten.
column-span	Bestimmt, wie viele Spalten ein Element überspannt.
column-width	zu bestimmen, die die beste Breite der Spalten festlegt.
columns	wird verwendet, um gleichzeitig die Breitecolumn-widthundcolumn-countKurzschreibweise für Attributwerte.

CSS3 Box-Größe(box-sizing)CSS3 Animationen(Animations)