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

Diesen Blogartikel teilen:

Verwandte Beiträge:

Divi: Premium-Theme für WordPress
Werbung

Geschrieben von Vladimir

Vladimir Simović, arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

  1. Vielen Dank für den Hinweis.
    Den CSS-Code werde ich demnächst einsetzen.

  2. Cool – danke! Ein mehrspaltiges Layout ist schon längst überfällig. Wann gibt’s das endlich mal nativ in ein CMS oder Theme integriert?

  3. Super Tipp! Vielen Dank, dafür – über entsprechende, leicht zu implementierende Lösungen mache ich mir schon seit längerem Gedanken! Werde es mal ausprobieren! Jetzt ist bloß noch die Frage, wie ältere Browser solches CSS präsentieren!? Grüße

  4. Sehr cooler Tip, danke dafür. Werd dann gleich mal sehen, ob ich das umgesetzt bekomme!

  5. […] Ich habe bereits vor einigen Wochen einen Artikel zum Thema mehrspaltiger Text geschrieben: CSS3: Mehrspaltiger Text. Dort wird nicht nur die CSS3-Lösung vorgestellt sondern es werden in den weiterführenden Links […]

  6. Vielen Vielen Dank!

  7. Schönen guten Tag – bin absoluter Neuling, an welcher Stelle in meinem Theme (twenty eleven) setze ich den Code ein? Vielen Dank

Kommentare sind geschlossen.