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.

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

Details: caniuse.com

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>column-width</title>
    <style>
 
      .mehrspaltig {
        -moz-column-width:    10em;
        -webkit-column-width: 10em;
        column-width:         10em;
      }
    </style>
  </head>
  <body>
    <h1>Spaltenlayout</h1>
    <article class="mehrspaltig">
      <h2>Allgemeines</h2>
      <p>...</p>
    </article>
  </body>
</html>

Mit column-width legen Sie fest, wie breit eine Spalte des Elements mindestens sein soll. Die Anzahl der Spalten und deren tatsächliche Breite ergeben sich aus dem zur Verfügung stehenden Platz.

Beachten Sie, dass lediglich eine Mindestbreite festgelegt wird.

Erlaubt ist eine Längenangabe oder der Wert auto. Letzterer ist die Voreinstellung. Er bedeutet, dass die Anzahl der Spalten durch column-count festgelegt wird oder dass es nur eine Spalte gibt.


Achtung!

Die Eigenschaft column-width ist derzeit (Stand: August 2016) noch nicht in alle aktuelle Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Firefox -moz-column-width
für Chrome, Opera, Safari -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.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML