CSS-Floats sind seit vielen Jahren eine heikle, aber notwendige Komponente bei der Erstellung von Website-Layouts. Wenn für Ihr Design mehrere Spalten erforderlich waren, haben Sie sich in Floats verwandelt. Das Problem bei dieser Methode besteht darin, dass trotz des unglaublichen Einfallsreichtums, den Webdesigner / -Entwickler bei der Erstellung komplexer Site-Layouts gezeigt haben, CSS-Floats niemals auf diese Weise verwendet werden sollten.
Während Floats und CSS-Positionierung sicherlich noch viele Jahre im Webdesign Platz finden werden, bieten neuere Layouttechniken wie CSS Grid und Flexbox Webdesignern nun neue Möglichkeiten, um ihre Site-Layouts zu erstellen. Eine weitere neue Layouttechnik, die viel Potenzial zeigt, ist CSS Multiple Columns.
CSS-Spalten gibt es bereits seit einigen Jahren, aber die Unterstützung älterer Browser (hauptsächlich ältere Versionen des Internet Explorers) hat viele Web-Profis davon abgehalten, diese Stile in ihrer Produktionsarbeit zu verwenden.
Mit dem Ende der Unterstützung für diese älteren Versionen von IE experimentieren einige Webdesigner nun mit neuen CSS-Layoutoptionen, einschließlich CSS-Spalten, und haben festgestellt, dass sie mit diesen neuen Ansätzen so viel mehr Kontrolle als mit Floats haben.
Die Grundlagen von CSS-Spalten
Wie der Name vermuten lässt, können Sie mit CSS Multiple Columns (auch bekannt als CSS3-Layout mit mehreren Spalten) Inhalt in eine bestimmte Anzahl von Spalten aufteilen. Die grundlegendsten CSS-Eigenschaften, die Sie verwenden würden, sind:
- Spaltenanzahl
- Spaltenlücke
Für die Spaltenanzahl geben Sie die Anzahl der gewünschten Spalten an. Die Spaltenlücke wäre die Rinne oder der Abstand zwischen diesen Spalten. Der Browser übernimmt diese Werte und teilt den Inhalt gleichmäßig in die von Ihnen angegebene Anzahl von Spalten auf.
Ein häufiges Beispiel für mehrere CSS-Spalten wäre in der Praxis, einen Block von Textinhalten in mehrere Spalten aufzuteilen, ähnlich dem, was Sie in einem Zeitungsartikel sehen würden. Angenommen, Sie haben das folgende HTML-Markup (Beachten Sie, dass ich zum Beispiel nur den Anfang eines Absatzes setze, während es in der Praxis wahrscheinlich mehrere Absätze des Inhalts in diesem Markup geben würde):
Wenn Sie dann diese CSS-Stile geschrieben haben:
.content {-moz-column-count: 3; -webkit-column-count: 3; Spaltenanzahl: 3; -Moz-Spaltenlücke: 30px; -webkit-Spaltenlücke: 30px; Spaltenlücke: 30px; }
Diese CSS-Regel würde die Aufteilung des Inhalts in drei gleiche Spalten mit einem Abstand von 30 Pixeln aufteilen. Wenn Sie zwei Spalten anstatt 3 Spalten haben möchten, ändern Sie einfach diesen Wert und der Browser berechnet die neuen Breiten dieser Spalten, um den Inhalt gleichmäßig zu teilen. Beachten Sie, dass wir zuerst die Eigenschaften des Herstellers verwenden, gefolgt von den Deklarationen ohne Präfix.
So einfach dies ist, ist ihre Verwendung für die Website-Nutzung fragwürdig. Ja, Sie können eine Reihe von Inhalten in mehrere Spalten aufteilen, dies ist jedoch möglicherweise nicht die beste Leseerfahrung für das Web, insbesondere wenn die Höhe dieser Spalten unter die "Falte" des Bildschirms fällt.
Die Leser müssten dann auf und ab scrollen, um den gesamten Inhalt lesen zu können. Das Prinzip von CSS-Spalten ist jedoch so einfach wie Sie hier sehen, und es kann so viel mehr getan werden, als nur den Inhalt einiger Absätze aufzuteilen - es kann tatsächlich für das Layout verwendet werden.
Layout mit CSS-Spalten
Angenommen, Sie haben eine Webseite mit einem Inhaltsbereich mit 3 Inhaltsspalten. Dies ist ein sehr typisches Website-Layout. Um diese 3 Spalten zu erreichen, würden Sie normalerweise die darin enthaltenen Unterteilungen verschieben. Mit CSS mit mehreren Spalten ist dies viel einfacher.
Hier ist ein Beispiel für HTML:
