CSS 3 Columns - Mehrspalten Layout, Version 1

Alte Version

Dies ist eine alte Version des Inhalts in unserem Archiv. Besuchen Sie die aktuelle Version dieser Seite.

Diese Version wurde von michaelh am 18. April 2011 um 14:49 Uhr erstellt.
Bemerkung des Bearbeiters: 1.0

Änderungen gegenüber vorheriger Version anzeigen


Mit CSS 3 Column ist es möglich schnell und sauber Mehrspalten Layouts zu realisieren.
Mit nur wenigen Eigenschaften kann man einen langweilig anmutenden fließ Text in ein schickes Zeitungs Design überführen.

Als Beispiel für den Artikel haben wir folgenden HTML Code

 
HTML
1
2
3
4
5
6
7
<div id="article">
    <h1>Überschrift des Artikels</h1>
    <img src="/blau.jpg" /> 
    <p>
        Artikel Text
    </p>    
</div>

Im Firefox 4 ohne CSS sieht es so aus

Bild zu CSS 3 Columns - Mehrspalten Layout

Column Count - Spaltenanzahl

Grundsätzlich gibt es zwei Möglichkeiten mit denen man festlegen kann, in wie viele Spalten der Text eingeteilt werden soll. Die erste Möglichkeit ist column-count mit dieser beschäftigen wir uns in diesem Abschnitt und im nachfolgenden Teil lernen wir column-width kennen.
Mit der Eigenschaft column-count kann man den Text in beliebig viele Spalten einteilen.
Jedoch gilt es die Browser Präfixe zu beachten, für den Firefox wäre dies -moz-, für Chrome und Safari -webkit-.
Fügen wir zu unserer HTML Seite folgenden CSS Code hinzu.

 
css
1
2
3
4
5
6
7
#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
}

Um den Text transformieren zu können, benötigen wir nur den umschließenden Container, im diesen Fall article und geben diesem die folgenden Eigenschaften.
Wenn wir dies nun im Browser ausgeben erhalten wir folgende Ausgabe.

Bild zu CSS 3 Columns - Mehrspalten Layout
Artikel gestylt mit column-count

Zu beachten gilt bei dieser Methode, dass die Höhe automatisch angepasst wird d.h. wenn die Schriftgröße erhöht wird, wird auch entsprechend mehr Platz nach unten benötigt.

Column Width - Spaltenbreite

Wie weiter oben schon beschrieben, gibt es noch eine zweite Möglichkeit Spalten zu erzeugen und zwar mit column-width. Man beschreibt, wie breit eine Spalte sein darf, danach wird geschaut wie oft sie in die Parent-Box passt, der Wert des Quotienten ist nun die Anzahl der Spalten. Wieder muss die Höhe beachtet werden.

Die zweite Möglichekeit wäre nun

 
css
1
2
3
4
5
6
7
#article {
    margin: 0 auto;
    width: 75%; 
    column-width: 380px;
      -moz-column-width: 380px;
      -webkit-column-width: 380px;
}

Column Gap - Spaltenabstand

Auch ist es möglich den Spaltenabstand zu definieren und zwar mit column-gab.
Die Spaltenabstände gelten jedoch nur für die Spalten zueinander und nicht für die Spalten zu anderen Containern.

In der CSS Datei sieht es nun folgender

Column Rule - Spaltengestaltung