CSS3 multi-colonna layout
Il layout a più colonne CSS3 permette una facile definizione di più colonne di testo - proprio come nei giornali:
quotidiano 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.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| 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à CSS3 multi-colonna
In questo capitolo imparerete sulle seguenti proprietà a più colonne:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 Creare più colonne
La column-count proprietà specifica il numero di colonne un elemento dovrebbe essere divisa in.
Il seguente esempio dividere il testo nel <div> elemento in 3 colonne:
Esempio
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Prova tu stesso " CSS3 Specificare il divario tra le colonne
La column-gap proprietà specifica la distanza tra le colonne.
L'esempio seguente specifica un divario di 40 pixel tra le colonne:
Esempio
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Prova tu stesso " Regole colonna CSS3
La column-rule-style proprietà specifica lo stile della regola tra le colonne:
Esempio
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Prova tu stesso " La column-rule-width proprietà specifica la larghezza della regola tra le colonne:
Esempio
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Prova tu stesso " La column-rule-color proprietà specifica il colore della regola tra le colonne:
Esempio
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Prova tu stesso " La column-rule proprietà è una proprietà scorciatoia per settare tutte le proprietà delle colonne-su regole * sopra.
L'esempio seguente imposta la larghezza, lo stile e il colore della regola tra le colonne:
Esempio
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Prova tu stesso " Specificare il numero di colonne di un elemento dovrebbe Span
La column-span proprietà specifica quante colonne di un elemento dovrebbe estendersi su.
L'esempio seguente specifica che il <h2> elemento dovrebbe estendersi su tutte le colonne:
Esempio
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Prova tu stesso " Specificare la larghezza della colonna
La column-width proprietà specifica una larghezza ottimale suggerita per le colonne.
L'esempio seguente specifica che la larghezza ottimale suggerita per le colonne dovrebbe essere 100px:
Esempio
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Prova tu stesso " CSS3 Multi-colonne Properties
Nella tabella seguente sono elencate tutte le proprietà multi-colonne:
| Proprietà | Descrizione |
|---|---|
| column-count | Specifica il numero di colonne un elemento deve essere suddivisa in |
| column-fill | Specifica come riempire le colonne |
| column-gap | Specifica la distanza tra le colonne |
| column-rule | Una proprietà scorciatoia per settare tutte le proprietà delle colonne-su regole * |
| column-rule-color | Specifica il colore della regola tra le colonne |
| column-rule-style | Specifica lo stile della regola tra le colonne |
| column-rule-width | Specifica la larghezza della regola tra le colonne |
| column-span | Specifica il numero di colonne di un elemento dovrebbe estendersi su |
| column-width | Specifica una larghezza ottimale suggerita per le colonne |
| columns | Una proprietà scorciatoia per settare column-width e column-count |