ul-Liste in Spalten mit column-count

Die Aufgabe: Für eine Übersichtsseite sollte eine unsortierte Liste mit 8 Listelementen in 2 Spalten dargestellt werden. Der Fluss der Liste sollte dabei erhalten bleiben und zusätzlich wollte man sich die Option offen halten, weitere Listelemente hinzufügen zu können und ggf. die Spaltenzahl auf 3 oder 4 zu erhöhen. Ich habe mich für column-count entschieden, damit war das super einfach umzusetzen.

ul#css3columnlist {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
ul#css3columnlist li{
line-height: 2em;
display: block;
}

  • Kategorie 1 Kategorie 1
  • Kategorie 2 Kategorie 2
  • Kategorie 3 Kategorie 3
  • Kategorie 4 Kategorie 4
  • Kategorie 5 Kategorie 5
  • Kategorie 6 Kategorie 6
  • Kategorie 7 Kategorie 7
  • Kategorie 8 Kategorie 8

Eine weitere Möglichkeit wäre hier auch gewesen, li-Elemente mit float:left zu nutzen. Hier allerdings wäre der „Textfluss“ von links nach rechts, also hier nicht so optimal. Schaut euch auch das zweite Beispiel einmal an.

Weiterlesen

CSS3 Multi Column Layout Generator

Wer auf die sSchnelle einen Text mit mehrspaltiger Aufteilung benötigt, ist mit dem CSS3 Multi Column Layout Generator von Aaron Lumsden gut bedient. Dort kannst du ganz einfach die css für einen mehrspaltig aufgeteilten Text online erstellen.

CSS3 Multi Column Layout Generator

Einfach die Anzahl der Spalten, den Platz zwischen den Spalten und ggf. eine Spaltentrennung eingeben. Eingaben direkt als Ergebnis begutachten und den Code herunterladen.

CSS3 Text auf mehrere Spalten verteilen

Wer einen Text auf mehrere Spalten verteilen will, kann mit Css3 die Funktionalität des Multi-Column-Layout-Moduls nutzen. Das ist recht einfach umgesetzt, im Prinzip gibt man entweder die Anzahl der Spalten, oder die gewünschte Breite der Spalten vor.

Man erhält dann das von Printmedien gewohnte Layout des Fliesstextes über mehrere Spalten. Kombinieren kann man das ganze zudem noch prima mit text-align: justify und hyphens: auto.

{
column-count: 3;
column-width: 150px;
}

Weiterlesen