Exemplu
Specificați un decalaj de 40 de pixeli între coloanele:
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea coloanei gap specifică diferența dintre coloanele.
Note: Dacă există o coloană de regulă între coloane, acesta va apărea în mijlocul diferenței.
| Valoare implicită: | normal |
|---|---|
| Mostenit: | no |
| Animatable: | yes. Read about animatable Try it |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.columnGap="50px" 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 | |||||
|---|---|---|---|---|---|
| column-gap | 50.0 4.0 -webkit- | 10.0 | 2.0 -moz- | 9 3.1 -webkit- | 37.0 15,0 -webkit 11.1 |
CSS Sintaxa
column-gap: Valori de proprietate Valoare Descriere Joaca-l length O anumită perioadă, care va stabili diferența dintre coloanele Joaca - l » normal Valoare implicită. Specifică un decalaj normală între coloanele. W3C sugereaza o valoare de 1em Joaca - l » initial Setează această proprietate la valoarea implicită. Citiți despre inițială Joaca - l » 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 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ță: columnGap property