diff options
Diffstat (limited to 'files/de/web/css/column-fill/index.html')
-rw-r--r-- | files/de/web/css/column-fill/index.html | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/files/de/web/css/column-fill/index.html b/files/de/web/css/column-fill/index.html new file mode 100644 index 0000000000..3750096c9f --- /dev/null +++ b/files/de/web/css/column-fill/index.html @@ -0,0 +1,74 @@ +--- +title: column-fill +slug: Web/CSS/column-fill +tags: + - CSS + - CSS Eigenschaft + - CSS Mehrspalten + - NeedsBrowserCompatibility + - Referenz +translation_of: Web/CSS/column-fill +--- +<div>{{CSSRef}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>column-fill</code> bestimmt die Aufteilung von Inhalten auf Spalten. Inhalte können entweder gleichmäßig verteilt werden, damit alle Spalten dieselbe Höhe haben, oder sie nehmen den Raum ein, den der Inhalt benötigt, sofern <code>auto</code> verwendet wird.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +column-fill: auto; +column-fill: balance; + +/* Globale Werte */ +column-fill: inherit; +column-fill: initial; +column-fill: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Die Spalten werden fortlaufend gefüllt.</dd> + <dt><code>balance</code></dt> + <dd>Der Inhalt wird gleichmäßig aufgeteilt.</dd> +</dl> + +<h3 id="csssyntax">{{csssyntax}}</h3> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush:css">.content-box { + column-count: 4; + column-rule: 1px solid black; + column-fill: balance; + height: 200px; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.column-fill")}} |