CSS-Eigenschaft column-count

❮ Vorige Nächste ❯

Die Eigenschaft column-count gibt die Anzahl der Spalten, die den Inhalt eines Elements teilt, an. Es hat zwei Werte: auto und number. "Auto" ist der Standardwert dieser Eigenschaft. Die Anzahl der Spalten wird durch andere Eigenschaften wie z. B. column-width bestimmt. Der Wert "number" gibt die Anzahl der Spalten an, in die der Inhalt des Elements fließen soll.

Anfangswert	auto
Gilt für	Block-Containers außer Tabellen-Wrapper-Boxen
Geerbt	Nein
Animierbar	Ja, die Anzahl von Spalten ist animierbar.
Version	CSS3
DOM Syntax	object.style.columnCount = "4";

Syntax

column-count: number | auto | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: auto; /* Chrome, Safari, Opera */
      -moz-column-count: auto; /* Firefox */
      column-count: 3;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft column-count</h2>
    <div>
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo die Spalte mit 7 angegeben ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      -webkit-column-count: 7; /* Chrome, Safari, Opera */
      -moz-column-count: 7; /* Firefox */
      column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-count</h2>
    <div>
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Es definiert die Anzahl der Spalten durch andere Eigenschaften. Das ist der Standardwert dieser Eigenschaft.
number	Es definiert die Anzahl der Spalten, wo der Inhalt der Elemente geschrieben werden soll.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von seinem übergeordneten Element.