Exemplu
Specificați lățimea și numărul de coloane:
div
{
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea coloanelor este o proprietate prescurtare pentru setarea coloanei de lățime și coloană de numărare.
| Valoare implicită: | auto auto |
|---|---|
| Mostenit: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.columns="100px 3" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| columns | 50.0 4.0 -webkit- | 10.0 | 9.0 -moz- | 9 3.1 -webkit- | 37.0 15,0 -webkit- 11.1 |
CSS Sintaxa
columns: auto| Valori de proprietate Valoare Descriere auto Valoare implicită. Setează atât coloana lățimea la "auto" și coloana contelui-a "auto" column-width Lățimea coloanelor column-count Numărul de coloane 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 referinta: columns property de columns property