CSS kolomwydte eiendom
Voorbeeld
Spesifiseer dat die kolomwydte 100px moet wees:
div
{
column-width: 100px;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die column-width
eienskap spesifiseer die kolomwydte.
Die aantal kolomme sal die minimum aantal kolomme wees wat nodig is om al die inhoud oor die element te wys.
column-width
is 'n buigsame eiendom. Dink aan
column-width
as 'n minimum breedte voorstel vir die blaaier. Sodra die blaaier nie ten minste twee kolomme op jou gespesifiseerde breedte kan pas nie, sal die kolomme stop en in 'n enkele kolom val.
Standaard waarde: | outo |
---|---|
Geërf: | geen |
Animateerbaar: | ja. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.columnWidth="100px" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit- of -moz- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
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-sintaksis
column-width: auto|length|initial|inherit;
Eiendomswaardes
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 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: columnWidth eiendom