Websites met stijl

Naslag: Multi-column layout

Op dit naslagblad

Multi-column layout

De multi-column layout bestaat uit een aantal eigenschappen die een layout in kolommen mogelijk maken.

De eigenschap column-count

De eigenschap column-count bepaalt het aantal kolommen.

Voorbeeld

div { -webkit-column-count: 2;/* Chrome, Safari, Opera */
-moz-column-count: 2;/* Firefox */
column-count: 2;
}

Vorm

column-count: waarde;

Waarden

autoHet aantal kolommen wordt door andere eigenschappen bepaald
getalhet aantal kolommen
initialstandaardwaarde (auto)
inheritErft de waarde van de parent.

Standaard waarde, vererving

standaardauto
vererftnee

De eigenschap column-gap

De eigenschap column-gap bepaalt de ruimte tussen de kolommen.

Voorbeeld

div { -webkit-column-span: 50px;/* Chrome, Safari, Opera */
-moz-column-gap: 50px;/* Firefox */
column-width: 50px;
}

Vorm

column-gap: waarde;

Waarden

breedtede breedte tussen de kolommen in px
normalde normale(standaard) ruimte (in de meeste browsers 1em).
initialstandaardwaarde (normal)
inheritErft de waarde van de parent.

Standaard waarde, vererving

standaardnormal
vererftnee

De eigenschap column-rule

De eigenschap column-rule bepaalt de eigenschappen van de lijn tussen de kolommen

Voorbeeld

div { -webkit-column-rule: 1px dotted blue;/* Chrome, Safari, Opera */
-moz-column-rule: 1px dotted blue;/* Firefox */
column-rule: 1px dotted blue;
}

Vorm

column-rule: lijndikte lijnstijl kleur ;

Stijlen

naamstijlvoorbeeld stijlregel
none(geen lijn)column-rule: none;
hidden(verborgen)column-rule: 2px hidden blue;
dotted column-rule: 2px dotted blue;
dashed column-rule: 2px dashed blue;
solid column-rule: 1px solid blue;
double column-rule: 4px double blue;
groove column-rule: 6px groove blue;
ridge column-rule: 6px ridge blue;
inset column-rule: 6px inset blue;
outset column-rule: 6px outset blue;

Standaardwaarden, vererving

standaardmedium none color
vererftnee
standaard color: de voorgrondkleur (tekstkleur) van het element

Opmerking

De eigenschap column-span

De eigenschap column-span bepaalt de ruimte tussen de kolommen.

Voorbeeld

div { -webkit-column-span: 50px;/* Chrome, Safari, Opera */
-moz-column-span: 50px;/* Firefox */
column-width: 50px;
}

Vorm

column-span: waarde;

Waarden

breedteDe breedte van de tussenruimte
normalde normale tussnruimte (in de meeste browsers 1em)
initialstandaardwaarde (normal)
inheritErft de waarde van de parent.

Standaard waarde, vererving

standaardnormal
vererftnee

Let op:

De eigenschap column-width

De eigenschap column-width bepaalt de optimale, tevens maximale, breedte van een kolom. De browser zal het aantal kolommen zó kiezen dat de kolombreedte zo groot mogelijk wordt binnen de bovengrens column-width.

Voorbeeld

div { -webkit-column-width: 300;/* Chrome, Safari, Opera */
-moz-column-width: 300px;/* Firefox */
column-width: 300px;
}

Vorm

column-width: waarde;

Waarden

autode browser bepaalt de kolombreedte (standaard)
breedtebreedte in pixels
initialstandaardwaarde (auto)
inheritErft de waarde van de parent.

Standaard waarde, vererving

standaardauto
vererftnee