Colonne multiple
CSS3 introduce un nuovo modulo, opportunamente, come layout multi-colonna. Esso consente di specificare
in quante colonne di testo dovrebbe essere diviso il layout
.
Ci sono quattro proprietà che si riferiscono al layout a più colonne in CSS3, permettendo di impostare il
numero di colonne, larghezza, distanza tra ogni colonna e di un confine tra ciascuna:
- column-count
- column-width
- column-gap
- colonna-rule
Allo stato attuale, un selettore browser specifico è inoltre necessaria per stabilire
se Safari o Firefox dovrebbe visualizzare il selettore.
Il codice da utilizzare per creare un layout a due colonne con una norma di 1px tra le
colonne sarebbe:
.multiplecolumns (
-moz-column -width: 130px;;
webkit-column -width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid # ddccb5;
-webkit-column-rule: 1px solid # ddccb5;
)
Spanning colonne
Potrebbe anche essere il caso che si desidera un elemento di spaziare più di una colonna - titolo di una tabella,
o l'immagine per esempio. Ciò è facilitato nel disciplinare attraverso l'uso di:
H2 (
-span: all
)
I numeri possono anche essere utilizzata per consentire l'elemento di calibrazione di un certo numero di colonne.
Al momento questa funzione non è implementata in tutti i principali browser, ma deve fornire tanto necessaria una
maggiore flessibilità
nella progettazione di tutto questa funzione. Esso permetterebbe di ottenere effetti quali:
