CSS3: Mehrspaltiger Text

Eine einfache Möglichkeit um mehrspaltige Artikel zu erstellen, wie man sie aus den Zeitschriften kennt, wünschen sich einige Webworker schon seit langer Zeit. In der Vergangenheit war das nur mit diversen Tricks oder manuell möglich. Entweder hat man auf Javascript-Lösungen zurückgegriffen, wie zum Beispiel Columnizer jQuery Plugin oder man hat die Spalten selber definiert, mit floats gearbeitet und manuell die Texte auf die jeweiligen Spalten verteilt.

Mit dem CSS Multi-column Layout Module von W3C gibt es seit einiger Zeit den Ansatz, dass Browser die mehrspaltigen Inhalte unterstützen sollen. Hier ein Beispiel:

Ich bin der Text in der ersten Spalte… Lorem Ipsum und hast du nicht gesehen.

Ich bin der Text in der zweiten Spalte… Lorem Ipsum und hast du nicht gesehen.

Hier der entsprechende Code:

div {
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-rule: 1px dotted #999;
-webkit-column-rule: 1px solid #999;
column-rule: 1px solid #999;
border: 1px solid #ddd;
padding: .5em;
}

Das ganze wird von Firefox (bzw. aktuellen Geckos), Google Chrome, Opera und dem Internet Explorer 10 unterstützt. Unter Create Columns Easily With The CSS3 Multi-Column Layout Module gibt es einen sehr ausführlichen Artikel zu diesem Thema und dort werden auch unter weiterführenden Links Javascript-Lösungen vorgestellt.

WordPress und Mehrspaltigkeit

Auf 6 Ways to Display WordPress Post Content in Multiple Columns werden Lösungen vorgestellt, wie man auch in WordPress mehrspaltiger Artikel realisieren kann.

Auf Texto.de wird eine einfache Lösung vorgestellt, wie man mit eigener Funktion und Shortcodes manuell Spalten generieren kann.

Links zu dem Thema

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.