Spaltenbreite - CSS-Tricks

Anonim

Wenn Sie Ihre Spalten auf einer bestimmten Breite halten möchten, verwenden Sie column-width.

section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )

Der Browser berechnet, wie viele Spalten mit mindestens dieser Breite in den Raum passen. Stellen Sie sich column-widtheinen Vorschlag für eine Mindestbreite für den Browser vor.

column-widthist eine flexible Eigenschaft. Sobald der Browser nicht mindestens 2 Spalten mit der angegebenen Breite aufnehmen kann, werden die Spalten angehalten und in eine einzelne Spalte eingefügt.

Diese Eigenschaft wird auch in der Kurzform für verwendet columnsund kann zusammen mit verwendet werden column-count. Wenn beide Eigenschaften deklariert sind, column-countist die maximale Anzahl von Spalten.

Werte

Sie können column-widthauf autooder eine Länge einstellen .

Verwenden autoSie diese Option, wenn Sie column-countdie Eigenschaft auch verwenden oder deaktivieren müssen. Stellen Sie sich das vor, um dem Browser zu sagen column-count, dass er die Führung übernehmen soll.

Verwenden Sie zum Festlegen der Spaltenbreite eine Länge größer (oder gleich) 0. Sie können jede CSS-Einheit außer dem Prozentsatz verwenden.

Browser-Unterstützung

Unterstützung für mehrspaltiges Layout:

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein 3+ 1,5+ 11.1+ 10+ 2.3+ 6.1+

Vergessen Sie nicht Ihre Präfixe!