Multi-Column
Multi-Column

CSSBeispiel-WerteBedeutung
column-count:4Anzahl der Spalten
column-width:200px;Breite der Spalten
columns:200px 4Kurzschreibweise für column-width und column-count.
column-fill:balance, autoArt der Füllung der Spalten. Sie kann ausgeglichen (Balance) oder sequenziell (auto) sein.
column-gap:15pxAbstand (Steg) zwischen den Spalten.
column-rule:2px dashed #333;Kurzschreibweise der folgenden Eigenschaften für die Trennlinie.
column-rule-color:rgba (3,3,3,0.5)Farbe der Trennlinie zwischen den Spalten.
column-rule-style:dashed, solid ...Art der Trennlinie zwischen den Spalten.
column-rule-width:4px,Stärke der Trennlinie des Stegs zwischen den Spalten.

frageantwort
Der Text soll zwei Spalten bekommen-webkit-columns: 2 auto; -moz-columns: 2 auto; (je nach Browser noch weiterer Kendo-Prefixe)
Die Trennlinie soll die Farbe Rot bekommen.-webkit-column-rule: 1px dotted #f00;
Die Trennlinie im Steg soll durchgängig sein.-webkit-column-rule: 1px solid #999;
Der Steg soll auf 35 Pixel Breite vergrößert werden.-webkit-column-gap: 35px; -moz-column-gap: 35px;
Orphans & Widows
Hurenkinder und Schusterjungen

CSSWerteBedeutung
orphans:3; 5; (...)Verhindert einzelne Zeilen am Ende einer neuen Seite oder Spalte. Entspricht dem typographischen Begriff "Schusterjunge". "Der Schusterjunge weiß nicht wo er hin soll."
widows:3; 5; (...)Verhindert einzelne Zeilen zu Beginn einer neuen Seite oder Spalte. Entspricht dem typographischen Begriff "Hurenkind". "Das Hurenkind weiß nicht wo es herkommt."

Column Eigenschaften für Eltern

CSSBeispiel-WerteBedeutung
column-count:4Anzahl der Spalten
column-width:200px;Breite der Spalten
columns:200px 4Kurzschreibweise für column-width und column-count.
column-fill:balance, autoArt der Füllung der Spalten. Sie kann ausgeglichen (Balance) oder sequenziell (auto) sein.
column-gap:15pxAbstand (Steg) zwischen den Spalten.
column-rule:2px dashed #333;Kurzschreibweise der folgenden Eigenschaften für die Trennlinie.
column-rule-color:rgba (3,3,3,0.5)Farbe der Trennlinie zwischen den Spalten.
column-rule-style:dashed, solid ...Art der Trennlinie zwischen den Spalten.
column-rule-width:4px,Stärke der Trennlinie des Stegs zwischen den Spalten.

frageantwort
Ein Absatz soll mit mindestens 5 Zeilen beginnen.widows: 5;
Die Überschrift soll über die ganze Breite laufen.Leider funktioniert die Eigenschaft column-span nicht überall. Daher bedeutet das Umbau! Hintergrundfarbe von Section auf main ... h1 aus section herauskopieren und davor einfügen.
Page-Break Avoid
Seitenumbruch

CSSWerteBedeutung
page-break-beforealways; avoid; left; right; autoErzeugt einen Spalten bzw. Seitenumbruch vor dem Element.
page-break-insideavoid; autoVerhindert den Umbruch innerhalb des Textes (avoid) oder erlaubt den Umbruch (auto).
page-break-afteralways; avoid; left; right; autoErzeugt einen Spalten bzw. Seitenumbruch nach dem Element.
-webkit-column-break-inside:avoid;Element wird bei Webkit Browsern (Safari, Chrome) nicht umbrochen sondern beginnt vollständig auf der neuen Seite oder Spalte.
column-span:2Elemente mit dieser Eigenschaft können in ihrer Breite über mehrere Spalten laufen.

Column Eigenschaften für Kinder

CSSBeispiel-WerteBedeutung
column-count:4Anzahl der Spalten
column-width:200px;Breite der Spalten
columns:200px 4Kurzschreibweise für column-width und column-count.
column-fill:balance, autoArt der Füllung der Spalten. Sie kann ausgeglichen (Balance) oder sequenziell (auto) sein.
column-gap:15pxAbstand (Steg) zwischen den Spalten.
column-rule:2px dashed #333;Kurzschreibweise der folgenden Eigenschaften für die Trennlinie.
column-rule-color:rgba (3,3,3,0.5)Farbe der Trennlinie zwischen den Spalten.
column-rule-style:dashed, solid ...Art der Trennlinie zwischen den Spalten.
column-rule-width:4px,Stärke der Trennlinie des Stegs zwischen den Spalten.

frageantwort
Entferne mal die Browser spezifischen Angaben die einen Umbruch des Artikel komplett verhindern.Entferne -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;
► Weitere Infos

Externe Quellen

Kompatibilität

http://caniuse.com/#feat=multicolumn

Die Unterstützung für die Eigenschaften des Multi-Column durch die heute gängigen Browser ist in Verbindung mit den Vendor-Prefixen und bei Beachtung der sehr unterschiedlichen Eigenschaften für die Steuerung der Seitenumbrüche sehr gut.


CSS Multi-column Layout Module

http://www.w3.org/TR/css3-multicol/

Original Entwurf der W3C für Multi-Column in CSS3 in englischer Sprache.


Webkrauts

http://webkrauts.de (...) css3-im-praxistest-multi-column-layout

Älterer und detailierter Artikel in deutscher Sprache. Auf jeden Fall lesenswert.