Mehrspaltiger Text mit CSS3

Das Anlegen von mehrspaltigen Texten wie man es aus Zeitungen und Zeitschriften kennt war bisher nur mit diversen Tricks zu realisieren. CSS3 liefert mit dem CSS Multi-column Layout Module eine einfache Möglichkeit mehrspaltige Artikel umzusetzen.

Beispiel:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a aliquet nec, vulputate eget, arcu.

Hier der entsprechende Code:

.mehrspaltig {
padding: .5em;
background: #F2F2F2;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
-moz-column-rule: 1px dotted #808080;
-webkit-column-rule: 1px dotted #808080;
column-rule: 1px dotted #808080;
}

column-count legt dabei die Anzahl der Spalten fest und über column-gab wird der Abstand zwischen den Spalten definieren. Mit column-rule lassen sich Linienbreite, -farbe sowie -stil festlegen, äquivalent zur CSS-Eigenschaft border.

Unterstütz wird das Ganze von den aktuellen Versionen von Firefox, Safari, Chrome und dem Internet Explorer 10. Browser die mehrspaltige Texte noch nicht unterstützen, stellen diese als Fließtext da.

Informationen zu mehrspaltige Texte mit CSS

Mehrspaltige Artikel mit WordPress

Schreibe einen Kommentar

Required fields are marked *.