CSS-Eigenschaft columns

❮ Vorige Nächste ❯

Die CSS-Eigenschaft columns ist eine Abkürzung für die Eigenschaften column-count und column-width. Die erste definiert die maximale Anzahl von Spalten, die zweite definiert die minimale Breite von Spalten. Diese beiden Eigenschaften bilden zusammen ein mehrspaltiges Layout, das bei schmalen Browserbreiten automatisch in eine einzige Spalte zerfällt, ohne Anfrage von Mediaabfragen oder andere Regeln.

Die Einstellung von column-count und column-width ist nicht immer sinnvoll, da sie die Flexibilität und Reaktionsfähigkeit des Layouts einschränken kann.

Wenn die Breite und Anzahl der Spalten nicht in die Breite des Elements passt, reduziert der Browser automatisch die Spaltenanzahl auf die angegebenen Spaltenbreiten.

Anfangswert	auto auto
Gilt für	Block-Containers außer Tabellen-Wrapper-Boxen
Geerbt	Nein
Animierbar	Ja, die Breite und Anzahl der Spalten sind animierbar.
Version	CSS3
DOM Syntax	object.style.columns = "100px 2";

Syntax

columns: auto | column-width column-count | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .example {
      -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
      -moz-columns: 100px 3; /* Firefox */
      columns: 100px 3;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft columns</h2>
    <div class="example">
     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.</p>
    </div>
  </body>
</html>

Versuch es selber!

Im nächsten Beispiel wird die minimale Breite für jede Spalte auf 50px und die maximale Anzahl der Spalten auf 5 eingestellt:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .example {
      -webkit-columns: 50px 5; /* Chrome, Safari, Opera */
      -moz-columns: 50px 5; /* Firefox */
      columns: 50px 5;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft columns</h2>
    <div class="example">
      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	Die Eigenschaften column-width und column-count sind auf auto eingestellt. Es ist der Standardwert.
column-width	Es stellt die Mindestbreite für die Spalten ein.
column-count	Es stellt die maximale Anzahl von Spalten ein.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von seinem übergeordneten Element.