Exemplu
Se specifică modul de completare coloane:
div
{
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea coloana-umplere specifică modul în care să umple coloanele, echilibrate sau nu.
| Valoare implicită: | balance |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.columnFill="auto" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmate de -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| column-fill | Nu sunt acceptate | Nu sunt acceptate | 13,0 -moz- | Nu sunt acceptate | Nu sunt acceptate |
CSS Sintaxa
column-fill: balance|auto|initial|inherit;Valori de proprietate
| Valoare | Descriere |
|---|---|
| balance | Valoare implicită. Coloanele sunt echilibrate. Browserele ar trebui să minimizeze variația lungimii coloanei |
| auto | Coloanele sunt umplute secvențial, iar acestea vor avea lungimi diferite |
| initial | Setează această proprietate la valoarea implicită. Citiți despre inițială |
| inherit | Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc |
Mai multe exemple
Coloana-count
Împărțiți textul într - un <div> elementul în trei coloane:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Încearcă - l singur » Coloana-gap
Împărțiți textul într - un <div> elementul în trei coloane și specificați un decalaj de 40 de pixeli între coloane.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Încearcă - l singur » Coloana regulă
Specificați lățimea, stilul și culoarea regula între coloane.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Încearcă - l singur » Pagini similare
Tutorial CSS3: Coloane multiple CSS3
HTML DOM referință: columnFill property