CSS -kolomvul- eiendom
Voorbeeld
Spesifiseer hoe om kolomme te vul:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die column-fill
eiendom spesifiseer hoe om kolomme te vul, gebalanseerd of nie.
Wenk: As jy 'n hoogte by 'n multi-kolom element voeg, kan jy beheer hoe die inhoud die kolomme vul. Die inhoud kan gebalanseer of opeenvolgend gevul word.
Standaard waarde: | balans |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | objek .style.columnFill="outo" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -moz- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
CSS-sintaksis
column-fill: balance|auto|initial|inherit;
Eiendomswaardes
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 voorbeelde
Voorbeeld
Verdeel die teks in 'n <div>-element in drie kolomme:
div
{
column-count: 3;
}
Voorbeeld
Spesifiseer 'n gaping van 40 pixels tussen die kolomme:
div
{
column-gap: 40px;
}
Voorbeeld
Spesifiseer die breedte, styl en kleur van die reël tussen kolomme:
div
{
column-rule: 4px double #ff00ff;
}
Verwante bladsye
CSS-tutoriaal: CSS Meervoudige Kolomme
HTML DOM verwysing: columnFill eiendom