Eigenschap voor het vullen van CSS -kolommen
Voorbeeld
Geef op hoe kolommen moeten worden gevuld:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De column-fill
eigenschap geeft aan hoe kolommen, al dan niet gebalanceerd, moeten worden gevuld.
Tip: Als u een hoogte toevoegt aan een element met meerdere kolommen, kunt u bepalen hoe de inhoud de kolommen vult. De inhoud kan worden gebalanceerd of sequentieel worden gevuld.
Standaardwaarde: | evenwicht |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.columnFill="auto" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -moz- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
CSS-syntaxis
column-fill: balance|auto|initial|inherit;
Eigendomswaarden
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
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: columnFill-eigenschap