CSS kolombreedte eigenschap
Voorbeeld
Geef op dat de kolombreedte 100 px moet zijn:
div
{
column-width: 100px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De column-width
eigenschap specificeert de kolombreedte.
Het aantal kolommen is het minimum aantal kolommen dat nodig is om alle inhoud van het element weer te geven.
column-width
is een flexibele eigenschap. Beschouw
column-width
als een suggestie voor een minimale breedte voor de browser. Zodra de browser niet ten minste twee kolommen op de door u opgegeven breedte past, stoppen de kolommen en vallen ze in een enkele kolom.
Standaardwaarde: | auto |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.columnWidth="100px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit- of -moz- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
CSS-syntaxis
column-width: auto|length|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Verdeel de tekst in een <div>-element in drie kolommen:
div
{
column-count: 3;
}
Voorbeeld
Geef een tussenruimte van 40 pixels op tussen de kolommen:
div
{
column-gap: 40px;
}
Voorbeeld
Specificeer de breedte, stijl en kleur van de regel tussen kolommen:
div
{
column-rule: 4px double #ff00ff;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS Meerdere kolommen
HTML DOM-referentie: eigenschap columnWidth