Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: columns, Kategorien: Bildschirm­darstellung (allgemein), Multi-column Layout (CSS 3)

Spalten (allgemein)

Steuert maximale Anzahl und minimale Breite der Spalten in einem mehrspaltigen HTML-Element.

CSS-Eigenschaft: columns
KurzbeschreibungWerteStandardwertKategorieHinweis
Spalten (allgemein)see individual properties
Allgemein:
Bildschirm­darstellung
CSS 3:
Multi-column Layout
Neu in CSS 3
 

Folgendes ist beim Einsatz von columns zu beachten:

  • columns ist die Kurzschreibweise für column-width und column-count und steuert die Breite bzw. die Anzahl der Spalten in einem mehrspaltigen HTML-Element.
    Gleichzeitig wird durch die Angabe von columns die eigentliche Mehrspaltigkeit aktiviert, es ist keine Angabe einer anderen Eigenschaft notwendig.
  • Anders als bei anderen Kurzschreibweise findet sich hier ein s am Ende von columns. Hier ist der Standard nicht ganz stringent, nimmt man margin, padding oder border als Maßstab, müsste die Eigenschaft column heißen.
  • Bei optimaler Unterstützung würde columns: 100px 2; ein zweispaltiges Layout zeigen:
    Screenshot eines zweispaltigen Layouts, das per columns gesetzt ist.
    Die Browserunterstützung ist jedoch mäßig. Abgesehen vom Internet Explorer, der mehrspaltiges Layout gar nicht unterstützt, sieht die Implementierung im Detail unterschiedlich aus:
    • Firefox:
      Obwohl column-width und column-count unterstützt wird, führt die Kurzschreibweise columns zu keiner mehrspaltigen Darstellung.
    • Opera
      verhält sich bei der Kurzschreibweise wie bei den einzelnen Parametern. Wenn eine column-width gesetzt ist, wird die Angabe von column-count ignoriert.
    • Safari und Google Chrome
      verhalten sich ebenfalls wie bei den einzelnen Parametern. Dort ist die Gewichtung abhängig von den Werten:
      Ist die Anzahl der Spalten kleiner, als durch die Breite berechnete Anzahl der Spalten, greift die Angabe für column-count.
      Ist die Anzahl der Spalten höher als durch die definierte Breite berechnete Anzahl der Spalten, greift column-width.
      Mit anderen Worten, der Wert für column-count verringert potentiell die Anzahl der Spalten, kann aber keine weiteren Spalten provozieren.
  • Eine konkrete Info, welche Browserversion columns in welchem Status unterstützt, folgt.
Browserunterstützung von columns
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16
n
Version: 20
-webkit-
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6
-webkit-
Version: 10Version: 11Version: 12
nj

Hinweis

Eine umfassender Beitrag zu Multi-column Layout ist bei den Webkrauts zu finden: CSS3 im Praxistest: Multi-column Layout

Weiterführende Informationen zu columns:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    column-width


Beispiele

HTML:

<p class="doDefault">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

p {
   border: 1px solid #999;
   background-image: url('img/gitter.png');
}
p.doDefault {
   columns: 100px 3;
}
/* Über columns wird die Anzahl und die Breite der Spalten gesetzt.
Ohne Vendor-Präfix wird column nur von Opera unterstützt.
Allerdings ignoriert Opera die Anzahl der Spalten, wenn eine Breite gesetzt ist. */
Beispiel nur für: Internet Explorer
W3C: 10
Opera

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doCount">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

p.doCount {
   columns: 100px 2;
}
/* In diesem Fall müsste der Wert 2 die Spalten auf zwei reduzieren. Tut er jedoch nicht, hier ist Opera fehlerhaft. */
Beispiel nur für: Internet Explorer
W3C: 10

Beispiel Nr. 2 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doAuto">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</p>

CSS:

p.doAuto {
   columns: auto 2;
}
/* Nur wenn der Parameter für column-width auto ist, oder weggelassen wird, greift der Parameter für column-count im Opera. */
Beispiel nur für: Internet Explorer
W3C: 10
Opera

Beispiel Nr. 3 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div class="doWebkit">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</div>

CSS:

div {
   border: 1px solid red;
   background-image: url('img/gitter.png');
}
 
div.doWebkit {
   -webkit-columns: 100px 3;
}
/* Hier die Schreibweise für Safari und Google Chrome. */
Beispiel nur für: Google ChromeSafari

Beispiel Nr. 4 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.
 

HTML:

<div class="doWebkitCount">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</div>

CSS:

div.doWebkitCount {
   -webkit-columns: 100px 2;
}
/* Hier die Schreibweise für Safari und Google Chrome. */
Beispiel nur für: Google ChromeSafari

Beispiel Nr. 5 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.
 

HTML:

<div class="doAll">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird.</div>

CSS:

div.doAll {
   border: 2px solid blue;
   columns: 100px 2;
   -webkit-columns: 100px 2;
}
/* Hier ist eine vollständie Angabe für columns, allerdings mit dem Unterschied, dass Opera die Anzahl der Spalten ignoriert, Safari und Google Chrome stellen reduziert die Anzahl der Spalten auf zwei. */
Beispiel nur für: Google ChromeInternet Explorer
W3C: 10
Safari

Beispiel Nr. 6 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 4.714 sec.

Browser-Marktanteile