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

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

Anzahl der Spalten

Aktiviert eine mehrspaltige Darstellung und definiert die Anzahl der Spalten.

CSS-Eigenschaft: column-count
KurzbeschreibungWerteStandardwertKategorieHinweis
Anzahl der Spalten
  • <integer>
  • auto
auto
Allgemein:
Bildschirm­darstellung
CSS 3:
Multi-column Layout
Neu in CSS 3
 

Folgendes ist beim Einsatz von column-count zu beachten:

  • column-count steuert die Anzahl der Spalten eines mehrspaltigen Elements. Gleichzeitig wird durch die Angabe von column-count die eigentliche Mehrspaltigkeit aktiviert, es ist keine Angabe einer anderen Eigenschaft notwendig.
  • Erwartet eine ganze Zahl größer als 0.
  • Die verfügbare Breite wird auf die Anzahl der Spalten aufgeteilt.
    Gleichmäßige Spaltenverteilung bei Angabe von column-count
    Im konkreten Beispiel ist column-count mit 4 angegeben, der verfügbare Platz ist 350px breit, die rechnerische Breite einer Spalte wäre 87,5 Pixel. Die Browser scheinen hier einheitlich in 10-Pixel-Schritten zu runden und stellen die Spalten mit einer Breite von 90px dar, die letzte mit 80px.
  • column-count interagiert mit column-width. Diese Eigenschaft gibt die Breite an, mit der die Spalten in einem mehrspaltigen Layout angezeigt werden sollen. Mit welcher Gewichtung diese Eigenschaften behandelt werden, ist bei den Browsern unterschiedlich:
    • Opera:
      column-width wird mit höherer Priorität behandelt, ist dort eine Breitenangabe definiert, ist column-count ohne Wirkung. Dies ist auch per !important nicht zu beeinflussen. Erst wenn column-width den Wert auto zugewiesen bekommt, kann column-count greifen. Der Standardwert von column-width ist auto, ist diese Eigenschaft nicht definiert, kann column-count greifen.
    • Firefox, Safari und Google Chrome:
      Hier ist die Gewichtung abhängig vom Wert. Ist die Anzahl der Spalten kleiner, als durch die Breite berechnete Anzahl der Spalten, greift column-count. Ist die Anzahl der Spalten höher als durch die definierte Breite berechnete Anzahl der Spalten, greift column-width. Mit anderen Worten, column-count verringert potentiell die Anzahl der Spalten, kann aber keine weiteren Spalten provozieren. Dies ist auch hier durch ! important nicht zu beeinflussen.
  • Die Browserunterstützung von column-count ist mäßig. Alleine Opera unterstützt die Eigenschaft vollständig, Firefox benötigt das Vendor-Präfix -moz-, Safari und Google Chrome den Präfix -webkit-, der Internet Explorer bis zur Version 9 unterstützt column-count auch mit einem Vendor-Präfix nicht.
  • Eine konkrete Info, welche Browserversion column-count in welchem Status unterstützt, folgt.
Browserunterstützung von column-count
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16
-moz-
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 column-count:

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


Beispiele

HTML:

<p>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 {
   column-count: 4;
   border: 1px solid #999;
   background-image: url('img/gitter.png');
}
/* Die Spalten werden gleichmäßig auf die vorhandene Breite verteilt.
Ohne Vendor-Präfix wird column-count nur von Opera unterstützt. */
Beispiel nur für: 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 {
   column-count: 4;
   column-width: 150px;
}
/* Falls column-width einen konkreten Wert hat, greift column-count nicht (Opera). */
Beispiel nur für: Opera

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="doCount 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 {
   column-count: 4;
   column-width: auto;
}
/* Wenn column-width den Wert auto hat, kann column-count greifen (Opera). */
Beispiel nur für: 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="doFirefox">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.doFirefox {
   -moz-column-count: 4;
}
/* Hier die Schreibweise für den Firefox. */
Beispiel nur für: Firefox

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="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.doWebkit {
   -webkit-column-count: 4;
}
/* Hier die Schreibweise für Safari und Google Chrome. */
Beispiel nur für: SafariGoogle Chrome

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;
   column-count: 4;
   -moz-column-count: 4;
   -webkit-column-count: 4;
}
/* Dies ist die vollständige Schreibweise, um so viele Browser wie möglich zu steuern.
Internet Explorer bis zur Version 9 unterstützen column-count gar nicht, mal schauen, was Version 10 bringt ;-) */
Beispiel nur für: FirefoxOperaSafariGoogle Chrome

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: 5.299 sec.

Browser-Marktanteile