CSS3 Multi-Column / Textspalten

Mittels CSS3 lassen sich mittlerweile auch in modernen Browsern mehrspaltige Text-Layouts erzeugen. Der Vorteil: In nur einem Objekt liegt der entsprechende Content. Ein Content-Bereich für jede Spalte wird nun nicht mehr benötigt. Die Darstellung basiert nun vollständig auf CSS3. Der Nachteil: Der CSS Befehl wird noch nicht von allen Browser unterstützt.

BefehlBedeutungMögliche Werte

column-count

Anzahl der Spalten

Integer / Zahl

column-width

Breite einer Spalte

Integer Wert in Pixel (px), mm, cm

column-span

Objekte, die über mehrere Spalten laufen

Anzahl der Spalten, oder alle (all)

column-rule

Trennlinie zwischen Spalten

Wie border.column-rule: width style color;

column-gap

Abstand zwischen Spalten

Integer Wert in Pixel (px), mm, cm

columns

Kombination / vereinfachte Schreibweise

z.B. „columns: 3 200px;“ erzeugt 3 Spalten á 200 Pixel Breite

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
3 Bewertungen
93 %
1
5
4.65
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.