Exemplu
Lăsați <h2> element de pe toate coloanele interval:
h2
{
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea coloana-interval specifică câte coloane un element ar trebui sa acopere intreaga.
| Valoare implicită: | 1 |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.columnSpan="all" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmate de -webkit- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| column-span | 50.0 4.0 -webkit- | 10.0 | Nu sunt acceptate | 9 3.1 -webkit- | 37.0 15,0 -webkit- 11.1 |
CSS Sintaxa
column-span: 1|all|initial|inherit;Valori de proprietate
| Valoare | Descriere | Joaca-l |
|---|---|---|
| 1 | Valoare implicită. Elementul ar trebui sa acopere peste o coloană | Joaca - l » |
| all | Elementul ar trebui sa acopere pe toate coloanele | 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-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ță: columnSpan property