Informationen
Das angeforderte Thema wird unten angezeigt. Es ist jedoch nicht in dieser Bibliothek vorhanden.

Mehrspaltiges Layout

Internet Explorer 10 und Windows Store-Apps mit JavaScript unter Windows 8 bieten jetzt Support für das CSS-Mehrspaltenlayout-Modul. Zum Zeitpunkt der Dokumenterstellung ist das Mehrspaltenlayout-Modul ein Empfehlungskandidat (Candidate Recommendation) des World Wide Web Consortium (W3C). Mit dem Mehrspaltenlayout kann Inhalt in mehrere Spalten einfließen, zwischen denen sich ein Abstand sowie eine optionale Trennlinie befinden. Zudem kann die Anzahl der Spalten auf Grundlage der Größe des Browserfensters variieren.

Ein mehrspaltiges Element definiert das W3C als Element, dessen column-width- oder column-count-Eigenschaft nicht auf "auto" gesetzt ist und das daher als Container für ein Mehrspaltenlayout fungiert. Das Mehrspaltenlayout bietet jetzt das Spaltenfeld, das als neuer Container-Typ zwischen Inhaltsfeld und Inhalt definiert ist. Spaltenfelder enthalten Zeilen, die in der Richtung des Mehrspaltenelements angeordnet sind. Jedes Spaltenfeld hat eine Spaltenhöhe und eine Spaltenbreite. Nebeneinander liegende Spaltenfelder sind durch einen Spaltenabstand voneinander getrennt, der optional eine Spaltentrennlinie enthalten kann.

Angeben von Spaltenbreite und -anzahl

Sie müssen mindestens die Breite von Spalten in einem Mehrspaltenelement angeben. In Internet Explorer 10 werden so viele Spalten wie möglich im Browserfenster angezeigt, die jeweils mindestens die von Ihnen angegebene Breite aufweisen. Verwenden Sie zum Angeben der Spaltenbreite die folgende Eigenschaft:

EigenschaftBeschreibung

column-width

Gibt die optimale Breite der Spalten in einem Mehrspaltenelement an.

Mögliche Werte für die Eigenschaft:

auto

Gibt an, dass die optimale Spaltenbreite von den anderen Eigenschaftswerten des Mehrspaltenelements bestimmt wird, z. B. dem Wert der column-count-Eigenschaft. Dies ist der Standardwert.

<length>

Ein relativer oder absoluter Längenwert, wie in der Referenz zu CSS-Werten und -Einheiten angegeben.

 

Die folgende Auswahl hat beispielsweise die "column-width"-Eigenschaft hinzugefügt und auf 200 Pixel gesetzt: Das bedeutet, dass Internet Explorer 10 das Browserfenster mit so vielen Spalten wie möglich mit einer Breite von mindestens 200 Pixeln füllt.


<style type="text/css">
#multicol1 {
  column-width: 200px;
}
</style>


Sie können die auf einen großen Textblock angewendete Auswahl anzeigen. (Internet Explorer 10 oder ein Browser, der mit CSS3-Mehrspalteneigenschaften (Cascading Stylesheets, Ebene 3) ohne Präfix kompatibel ist, wird zur richtigen Wiedergabe dieser Seite benötigt.)

Sie können auch angeben, wie viele Spalten ein Mehrspaltenelement umfassen soll. Verwenden Sie zum Angeben der Spaltenanzahl die folgende Eigenschaft:

EigenschaftBeschreibung

column-count

Gibt die optimale Anzahl der Spalten in einem Mehrspaltenelement an.

Mögliche Werte für diese Eigenschaft:

auto

Gibt an, dass die Anzahl der Spalten durch die Werte der anderen Eigenschaftenwerte des Mehrspaltenelements, z. B. der column-width-Eigenschaft, bestimmt wird. Dies ist der Standardwert.

<integer>

Gibt die Anzahl der Spalten an.

 

Die folgende Auswahl hat beispielsweise die column-count-Eigenschaft hinzugefügt und auf "2" gesetzt: Das bedeutet, dass Internet Explorer 10 das Browserfenster mit genau zwei Spalten füllt.


<style type="text/css">
#multicol1 {
  column-count: 2;
}
</style>


Sie können die auf einen großen Textblock angewendete Auswahl anzeigen. (Zum korrekten Rendern dieser Seite ist Internet Explorer 10 oder ein Browser, der mit CSS3-Mehrspalteneigenschaften ohne Präfix kompatibel ist, erforderlich.)

Spaltenbreite und -anzahl können auch mit der folgenden Kompakteigenschaft ausgedrückt werden:

EigenschaftBeschreibung

columns

Eine Kompakteigenschaft, die Werte für die Eigenschaften column-width und column-count eines Mehrspaltenelements angibt.

 

Für diese Eigenschaft gilt die folgende Syntax:

columns: <column-width> <column-count>;

Folgende Syntax ist ebenfalls zulässig:

columns: <column-count> <column-width>;

Wenn nur eine ganze Zahl angegeben wird, wird column-width auf auto und column-count auf die ganze Zahl gesetzt. Wenn nur ein Längenwert angeben wird, wird column-width auf den Längenwert und column-count auf auto gesetzt. Wenn nur auto angegeben wird, werden sowohl column-width als auch column-count auf auto gesetzt.

Die folgende Auswahl hat beispielsweise die columns-Eigenschaft hinzugefügt und auf "auto 12em" gesetzt. Das Mehrspaltenelement wird also eine column-width von 12 em und eine column-count von auto haben.


<style type="text/css">
#multicol3 {
  columns: auto 12em;
}
</style>


Sie können die auf einen großen Textblock angewendete Auswahl anzeigen. (Zum korrekten Rendern dieser Seite ist Internet Explorer 10 oder ein Browser, der mit CSS3-Mehrspalteneigenschaften ohne Präfix kompatibel ist, erforderlich.)

Angeben von Spaltenabständen und -trennlinien

Spaltenabstände und Spaltentrennlinien werden über die gesamte Länge zwischen den Spalten eines Mehrspaltenelements platziert. Spaltenabstände bewirken, dass zwischen den Spalten ein gewisser Platz eingefügt wird, wodurch die Lesbarkeit verbessert wird. Eine Spaltentrennlinie wird in der Mitte eines Spaltenabstands zwischen zwei Spalten gezeichnet, allerdings nur dann, wenn beide Spalten Inhalt aufweisen.

Mit den folgenden Eigenschaften werden Spaltenabstände und -trennlinien angegeben:

EigenschaftBeschreibung

column-gap

Gibt die Breite des Abstands zwischen Spalten in einem Mehrspaltenelement an.

Mögliche Werte für diese Eigenschaft:

normal

Die Standardbreite von 1 em.

<length>

Ein relativer oder absoluter Längenwert, wie in Referenz zu CSS-Werten und -Einheiten angegeben.

column-rule-color

Gibt die Farbe aller Spaltentrennlinien in einem Mehrspaltenelement an. Diese Eigenschaft kann auf jeden unterstützten Farbwert gesetzt werden.

column-rule-style

Gibt den Stil aller Spaltentrennlinien in einem Mehrspaltenelement an. Für diese Eigenschaft können dieselben Werte angegeben werden wie für die border-style-Eigenschaft.

column-rule-width

Gibt die Breite aller Spaltentrennlinien in einem Mehrspaltenelement an. Für diese Eigenschaft können dieselben Werte angegeben werden wie für die border-width-Eigenschaft.

column-rule

Eine Kompakteigenschaft, die Werte für die Eigenschaften column-rule-width, column-rule-style und column-rule-color eines Mehrspaltenelements angibt.

Für diese Eigenschaft gilt die folgende Syntax:

column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;

 

Das folgende Beispiel zeigt mehrere dieser Eigenschaften innerhalb einer Auswahl:


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1em;
  column-rule-style: solid;
  column-rule-color: black;
}
</style>


In diesem Fall wurde sowohl für den Spaltenabstand als auch für die Spaltentrennlinie eine Breite von 1 em angegeben. Die Spaltentrennlinie ist durchgehend und schwarz. Sie können die auf einen großen Textblock angewendete Auswahl anzeigen. (Zum korrekten Rendern dieser Seite ist Internet Explorer 10 oder ein Browser, der mit CSS3-Mehrspalteneigenschaften ohne Präfix kompatibel ist, erforderlich.)

Beachten Sie, dass das obige Beispiel auch mit der column-rule-Kompakteigenschaft ausgedrückt werden könnte. Das sieht folgendermaßen aus:


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule: 1em solid black;
}
</style>


Angeben von Spaltenumbrüchen

Sie können angeben, wann Inhalt zwischen Spalten umbrochen werden soll. Dadurch werden Umbrüche innerhalb von Absätzen, Abschnitten usw. vermieden. Spaltenumbrüche sind mit Seitenumbrüchen beim Drucken vergleichbar, und tatsächlich lassen sie sich in sehr ähnlicher Weise mit Cascading Stylesheets (CSS) steuern.

Spaltenumbrüche werden mit den folgenden Eigenschaften gesteuert:

EigenschaftBeschreibung

break-before

Gibt das Spaltenumbruchverhalten vor einem Inhaltsblock in einem Mehrspaltenelement an.

Für diese Eigenschaft können dieselben Werte wie für die page-break-before-Eigenschaft und zusätzlich folgende Werte angegeben werden:

page

Erzwingt immer einen Seitenumbruch vor dem generierten Feld.

column

Erzwingt immer einen Spaltenumbruch vor dem generierten Feld.

avoid-page

Vermeidet einen Seitenumbruch vor dem generierten Feld.

avoid-column

Vermeidet einen Spaltenumbruch vor dem generierten Feld.

break-after

Gibt das Spaltenumbruchverhalten nach einem Inhaltsblock in einem Mehrspaltenelement an.

Für diese Eigenschaft können dieselben Werte wie für die page-break-after-Eigenschaft und zusätzlich folgende Werte angegeben werden:

page

Erzwingt immer einen Seitenumbruch nach dem generierten Feld.

column

Erzwingt immer einen Spaltenumbruch nach dem generierten Feld.

avoid-page

Vermeidet einen Seitenumbruch nach dem generierten Feld.

avoid-column

Vermeidet einen Spaltenumbruch nach dem generierten Feld.

break-inside

Gibt das Spaltenumbruchverhalten innerhalb eines Inhaltsblocks in einem Mehrspaltenelement an.

Für diese Eigenschaft können dieselben Werte wie für die page-break-inside-Eigenschaft und zusätzlich folgende Werte angegeben werden:

avoid-page

Vermeidet einen Seitenumbruch innerhalb des generierten Felds.

avoid-column

Vermeidet einen Spaltenumbruch innerhalb des generierten Felds.

 

Das folgende Beispiel zeigt mehrere dieser Eigenschaften innerhalb einer Auswahl:


<style type="text/css">
#multicol5 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol5 h2 {
  column-span: all;
  background: lightgreen;
}
#multicol5 blockquote {
  break-inside: avoid-column;
}
</style>


In diesem Beispiel gehen allen h2-Elementen ein Spaltenumbruch und ein Rand von 2 em voraus. In einem blockquote-Element können keine Spaltenumbrüche auftreten. Sie können diese auf einen großen Textblock angewendeten Auswahlen anzeigen. (Zum korrekten Rendern dieser Seite ist Internet Explorer 10 oder ein Browser, der mit CSS3-Mehrspalteneigenschaften ohne Präfix kompatibel ist, erforderlich.)

Angeben einer Spaltenspanne

Sie können angeben, dass ein Inhaltsblock mehrere Spalten umspannen soll. Ein Element, dass mehrere Spalten umspannt, fungiert effektiv als Umbruch zwischen dem Inhalt vor und nach dem Element. Die Spaltenspanne wird mit der folgenden Eigenschaft gesteuert:

EigenschaftBeschreibung

column-span

Gibt die Anzahl der Spalten an, die ein Inhaltsblock in einem Mehrspaltenelement umspannen soll.

Mögliche Werte für diese Eigenschaft:

all

Der Inhaltsblock umspannt alle Spalten auf einer Seite. Jeglicher vor dem Inhaltsblock deklarierte Inhalt wird vor dem Inhaltsblock angezeigt.

"1"

Dies ist der Standardwert. Der Inhaltsblock umspannt nicht mehrere Spalten.

 

Das folgende Beispiel zeigt diese Eigenschaft innerhalb einer Auswahl:


<style type="text/css">
#multicol6 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol6 h2 {
  column-span: all;
  background: lightgreen;
}
</style>


In diesem Fall umspannen alle h2-Elemente alle Spalten und weisen einen hellgrünen Hintergrund auf.

Sie können diese auf einen großen Textblock angewendeten Auswahlen anzeigen. (Zum korrekten Rendern dieser Seite ist Internet Explorer 10 oder ein Browser, der mit CSS3-Mehrspalteneigenschaften ohne Präfix kompatibel ist, erforderlich.)

Gleichmäßiges Verteilen des Spalteninhalts

Sie können angeben, ob der Inhalt gleichmäßig auf alle Spalten verteilt werden soll — also die Spaltenlänge möglichst wenig variieren soll. Andernfalls werden Spalten nacheinander gefüllt, sodass ihre Länge variiert.

Das Füllen der Spalten wird mit der folgenden Eigenschaft gesteuert:

EigenschaftBeschreibung

column-fill

Gibt an, wie sich der Inhaltsfluss auf die Länge der Spalten in einem Mehrspaltenelement auswirkt.

Mögliche Werte dieser Eigenschaft sind die folgenden Schlüsselwörter:

balance

Die Spalten werden nacheinander so gefüllt, dass die Spaltenhöhe abhängig von den Werten anderer Spalteneigenschaften möglichst ausgeglichen ist.

auto

Dies ist der Standardwert. Die Spalten werden nacheinander so gefüllt, dass die Länge der Spalten abhängig von den Werten anderer Spalteneigenschaften variieren kann.

Der Spaltenausgleich hängt auch von den Werten der Eigenschaften orphans und widows, sofern diese festgelegt sind.

 

Das folgende Beispiel zeigt diese Eigenschaft innerhalb einer Auswahl:


<style type="text/css">
#multicol7 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
  column-fill: balance;
}
</style>


In diesem Fall wurde die column-fill-Eigenschaft auf balance gesetzt, d. h., die Länge der Spalten ist möglichst ausgeglichen.

Sie können diese auf einen großen Textblock angewendeten Auswahlen anzeigen. (Zum korrekten Rendern dieser Seite ist Internet Explorer 10 oder ein Browser, der mit CSS3-Mehrspalteneigenschaften ohne Präfix kompatibel ist, erforderlich.)

API-Referenz

Multi-column Layout

Beispiele und Lernprogramme

Beispiel für das CSS-Mehrspaltenlayout
Entwickeln von adaptiven Websites

Demos für die Internet Explorer-Testversion

Tweet Columns
So geht's: Mehrspaltenlayout

IEBlog-Beiträge

IE10 Platform Preview und CSS-Features für adaptive Layouts

Spezifikation

CSS-Modul für mehrspaltiges Layout

 

 

Anzeigen:
© 2014 Microsoft