CSS veelvuldige kolomme
CSS Multi-kolom uitleg
Die CSS multi-kolom uitleg laat maklike definisie van veelvuldige kolomme teks toe - net soos in koerante:
Daaglikse Ping
Die
pyn self is die liefde Daarom is dit vir die geringste wat kom, wie ons normale praktyk verdra om voordeel te trek uit die gevolge Die pyn van die pyn in die buro in die Olimpiese Spele, of die pyn in die buro in die Olimpiese Spele, hy wil 'n ergernis wees vir die gevolge, of hy ly aan die pyn van die eu-immuunstelsel by die waarheid, die eros en die verbruiker, en die gereelde haat van die zzril. Want 'n vrye tyd wanneer ons bevry is van ons tieners is geen keuse nie
CSS Multi-kolom Eienskappe
In hierdie hoofstuk sal jy leer oor die volgende multi-kolom eienskappe:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS Skep veelvuldige kolomme
Die column-counteienskap spesifiseer die aantal kolomme waarin 'n element verdeel moet word.
Die volgende voorbeeld sal die teks in die <div>-element in 3 kolomme verdeel:
Voorbeeld
div
{
column-count: 3;
}
CSS Spesifiseer die gaping tussen kolomme
Die column-gapeiendom spesifiseer die gaping tussen die kolomme.
Die volgende voorbeeld spesifiseer 'n gaping van 40 pixels tussen die kolomme:
Voorbeeld
div
{
column-gap: 40px;
}
CSS-kolomreëls
Die column-rule-styleeiendom spesifiseer die styl van die reël tussen kolomme:
Voorbeeld
div
{
column-rule-style: solid;
}
Die column-rule-widtheienskap spesifiseer die breedte van die reël tussen kolomme:
Voorbeeld
div
{
column-rule-width: 1px;
}
Die column-rule-coloreienskap spesifiseer die kleur van die reël tussen kolomme:
Voorbeeld
div
{
column-rule-color: lightblue;
}
Die column-ruleeiendom is 'n snelskrif-eienskap vir die opstel van al die kolom-reël-* eienskappe hierbo.
Die volgende voorbeeld stel die breedte, styl en kleur van die reël tussen kolomme:
Voorbeeld
div
{
column-rule: 1px solid lightblue;
}
Spesifiseer hoeveel kolomme 'n element moet strek
Die column-spaneienskap spesifiseer oor hoeveel kolomme 'n element moet strek.
Die volgende voorbeeld spesifiseer dat die <h2>-element oor alle kolomme moet strek:
Voorbeeld
h2 {
column-span: all;
}
Spesifiseer die kolombreedte
Die column-widtheiendom spesifiseer 'n voorgestelde, optimale breedte vir die kolomme.
Die volgende voorbeeld spesifiseer dat die voorgestelde, optimale breedte vir die kolomme 100px moet wees:
Voorbeeld
div {
column-width: 100px;
}
CSS Multi-kolomme Eienskappe
Die volgende tabel lys al die multi-kolomme eienskappe:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |