CSS/Eigenschaften/Textausrichtung/Spalten/column-width

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft column-width können Sie für ein Element durch die Angabe einer Mindestspaltenbreite bestimmen, ob es in mehreren Spalten angezeigt wird. Die Spalten werden dabei gleichmäßig befüllt. Die Anzahl der Spalten und deren tatsächliche Breite ergeben sich aus dem zur Verfügung stehenden Platz.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Erlaubte Werte:

  • Längenangabe
  • auto: (Standardwert) Er bedeutet, dass die Anzahl der Spalten durch column-count festgelegt wird oder dass es nur eine Spalte gibt.
Beachten Sie, dass lediglich eine Mindestbreite festgelegt wird.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
 
      .mehrspaltig {
        -webkit-column-width: 12em;
        column-width:         12em;
        max-width: 40em; 
        border: 1px solid;
      }
Der Artikel wird in Spalten mit einer Mindestbreite von 12em aufgeteilt. Da die max-width 40em beträgt und der Abstand zwischen den einzelnen Spalten durch den Standardwert von column-gap ca. 1em beträgt, ist die (bei größeren Viewports) angezeigte Breite nahe an den 12em.
Gerade beim Bild zeigt sich, dass hier eine größere Mindestbreite verwendet werden sollte.


Achtung!

Die Eigenschaft column-width ist derzeit (Stand: Oktober 2017) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-column-width

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

siehe auch[Bearbeiten]