CSS3 multi-coloană Layout
Dispunerea CSS3 multi-coloană permite definirea ușoară a mai multor coloane de text - la fel ca în ziare:
Daily Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
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-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Proprietăți CSS3 mai multe coloane
În acest capitol veți învăța despre următoarele proprietăți mai multe coloane:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 Creați coloane multiple
column-count proprietate specifică numărul de coloane element trebuie divizat în.
Următorul exemplu va împărți textul în <div> elementul în 3 coloane:
Exemplu
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Încearcă - l singur » CSS3 Se specifică diferența dintre coloane
column-gap proprietate specifică diferența dintre coloanele.
Următorul exemplu specifică un decalaj de 40 de pixeli între coloanele:
Exemplu
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Încearcă - l singur » Reguli Coloana CSS3
column-rule-style proprietate specifică stilul regulii între coloane:
Exemplu
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Încearcă - l singur » column-rule-width proprietate specifică lățimea regulii între coloane:
Exemplu
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Încearcă - l singur » column-rule-color proprietate specifică culoarea regula între coloane:
Exemplu
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Încearcă - l singur » column-rule proprietate este o proprietate prescurtare pentru stabilirea tuturor proprietăților coloane rule- * de mai sus.
Următorul exemplu stabilește lățimea, stilul și culoarea regula între coloane:
Exemplu
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Încearcă - l singur » Specificați câte coloane un Element ar trebui sa acopere
column-span proprietate specifică modul în care numărul de coloane , un element ar trebui sa acopere intreaga.
Următorul exemplu specifică faptul că <h2> elementul ar trebui sa acopere pe toate coloanele:
Exemplu
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Încearcă - l singur » Se specifică Lățimea coloanei
column-width proprietate specifică o lățime optimă sugerată pentru coloanele.
Următorul exemplu specifică faptul că a sugerat, lățimea optimă pentru coloanele trebuie să fie 100px:
Exemplu
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Încearcă - l singur » CSS3 Multi-coloane Proprietăți
Tabelul de mai jos listează toate proprietățile multi-coloane:
| Proprietate | Descriere |
|---|---|
| column-count | Specifică numărul de coloane element trebuie să fie împărțită în |
| column-fill | Specifică modul de completare coloane |
| column-gap | Specifică diferența dintre coloanele |
| column-rule | O proprietate prescurtare pentru stabilirea tuturor proprietăților coloane rule- * |
| column-rule-color | Specifică culoarea regula între coloane |
| column-rule-style | Specifică stilul regulii între coloane |
| column-rule-width | Specifică lățimea regulii între coloane |
| column-span | Specifică câte un element de coloane ar trebui sa acopere întreaga |
| column-width | Specifică o lățime optimă sugerată pentru coloanele |
| columns | O proprietate prescurtare pentru stabilirea coloană lățime și coloană de numărare |