CSS-Eigenschaft columns

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>

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>

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.

Browser-Support

50.0
-webkit-
12.0
-webkit-
52.0
+ 9.0 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-


Finden Sie das nützlich?

Ähnliche Artikel