CSS-Mehrspaltenlayout

Das CSS-Mehrspaltenlayout-Modul ermöglicht es Ihnen, Inhalte über mehrere Spalten zu verteilen. Durch die Verwendung der Eigenschaften dieses Moduls können Sie die bevorzugte Anzahl und Breite der Spalten, die Lückenbreite zwischen den Spalten und das visuelle Erscheinungsbild der optionalen spaltentrennenden Linien (bekannt als Spaltenregeln) festlegen. Sie können auch definieren, wie Inhalte von Spalte zu Spalte fließen und wie Inhalte zwischen Spalten unterbrochen werden sollen.

Mehrspaltenlayout in Aktion

In diesem Beispiel wird die Rede von 1967 zum kanadischen Jubiläum, A Lament for Confederation, von Chief Dan George, über mehrere Spalten verteilt dargestellt, ähnlich wie Artikel in gedruckten Zeitungen angezeigt werden. Wenn Sie JavaScript aktiviert haben, können Sie die bevorzugte Spaltenanzahl und -breite, die Breite des Abstands zwischen den Spalten, ob der Titel und ein Beispiel-Blockzitat in einer einzigen Spalte enthalten oder über alle Spalten hinweg erstreckt werden sollen, und ob das Brechen innerhalb der Absätze vermieden werden soll, ändern.

Hinweis: Mehrspaltenlayout ist eng verwandt mit Paginierte Medien. Jede Spaltenbox ist ein Fragment, ähnlich wie jede gedruckte Seite ein Fragment eines Dokuments ist. Mithilfe der im CSS-Fragmentierung Modul definierten Eigenschaften können Sie steuern, wie Inhalte zwischen Spalten und Seiten unterbrochen werden.

Referenz

Eigenschaften

Hinweis: Bedenken Sie, dass das Festlegen der Containerhöhe und der Zeilenlänge Herausforderungen für Menschen mit visuellen oder kognitiven Behinderungen darstellen kann. WCAG Erfolgskriterium 1.4.8 besagt, dass auch bei Verdopplung der Textgröße der Inhalt nicht gescrollt werden muss.

Leitfäden

Grundkonzepte des Mehrspaltenlayouts

Ein Überblick über die Mehrspaltenlayout-Spezifikation

Verwendung von Mehrspaltenlayouts

Leitfaden zur Verwendung von Mehrspalteneigenschaften zur Textgestaltung.

Styling von Spalten

Wie man Spaltenregeln verwendet und den Abstand zwischen Spalten verwaltet.

Spannweite und Balance

Wie man Elemente über alle Spalten hinweg erstrecken und die Füllweise der Spalten steuern kann.

Umgang mit Überlauf im Mehrspaltenlayout

Was passiert, wenn ein Element die Spalte, in der es sich befindet, überläuft und was passiert, wenn zu viel Spalteninhalt vorhanden ist, um in einen Container zu passen.

Umgang mit Inhaltsumbrüchen im Mehrspaltenlayout

Einführung in die Fragmentierungsspezifikation und wie man steuert, wo Spalteninhalte unterbrochen werden.

Verwandte Konzepte

Spezifikationen

Specification
CSS Multi-column Layout Module Level 1

Siehe auch