CSS Mehrspalten-Layout

Das CSS Mehrspalten-Layout Modul ermöglicht es Ihnen, Inhalte auf mehrere Spalten zu verteilen. Mit den Eigenschaften dieses Moduls können Sie die bevorzugte Anzahl und Breite der Spalten, die Größe des Abstands zwischen den Spalten und das visuelle Erscheinungsbild der optionalen Trennlinien (bekannt als Spaltenregeln) definieren. Sie können auch festlegen, wie der Inhalt von Spalte zu Spalte fließen soll und wie Inhalte zwischen Spalten gebrochen werden sollen.

Mehrspalten-Layout in Aktion

In diesem Beispiel wird die Rede von 1967 zum hundertjährigen Bestehen Kanadas, A Lament for Confederation, von Chief Dan George, über mehrere Spalten hinweg angezeigt, ähnlich wie Artikel in gedruckten Zeitungen. Wenn JavaScript aktiviert ist, ermöglichen Steuerungselemente, die bevorzugte Spaltenanzahl und -breite, die Breite des Zwischenraums zwischen den Spalten sowie, ob der Titel und ein Beispiel-Blockzitat in einer einzigen Spalte enthalten oder über alle Spalten hinweg gespannt sein sollen, und ob ein Unterbrechen innerhalb der Absätze vermieden werden soll.

Hinweis: Mehrspalten-Layout steht in engem Zusammenhang mit Seitenmedien. Jede Spaltenbox ist ein Fragment, ähnlich wie jede gedruckte Seite ein Fragment eines Dokuments ist. Mit den im CSS Fragmentierung Modul definierten Eigenschaften können Sie steuern, wie Inhalte zwischen Spalten und Seiten gebrochen werden.

Referenz

Eigenschaften

Hinweis: Beachten Sie, dass das Festlegen der Containerhöhe und Zeilenlänge Herausforderungen für Personen mit visuellen oder kognitiven Behinderungen darstellen kann. WCAG Erfolgskriterium 1.4.8 besagt, dass selbst wenn die Textgröße verdoppelt wird, Inhalte nicht gescrollt werden müssen sollten.

Leitfäden

Grundkonzepte des Mehrspalten-Layouts

Ein Überblick über die Mehrspalten-Layout-Spezifikation

Verwendung von Mehrspalten-Layouts

Anleitung zur Verwendung von Mehrspalteneigenschaften zur Textlayoutgestaltung.

Spalten stylen

Wie man Spaltenregeln verwendet und den Abstand zwischen den Spalten verwaltet.

Spannen und Ausbalancieren

Wie man Elemente über alle Spalten hinweg spannt und steuert, wie Spalten gefüllt werden.

Umgang mit Überlauf im Mehrspalten-Layout

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

Umgang mit Inhaltsumbrüchen im Mehrspalten-Layout

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

Verwandte Konzepte

Spezifikationen

Specification
CSS Multi-column Layout Module Level 1

Siehe auch