Layout a più colonne CSS3

Con CSS3, puoi dividere il contenuto del testo dell'elemento in più colonne.

Creazione di un layout a più colonne

CSS3 ha introdotto il modulo di layout a più colonne, utilizzato per creare layout a più colonne in modo semplice ed efficace. Ora, puoi creare layout come quelli visti nei giornali e nelle riviste senza utilizzare i浮动. Ecco un esempio semplice di come utilizzare la funzionalità di layout a più colonne di CSS3 per dividere alcuni testi in tre colonne.

p {
　　　　-webkit-column-count: 3; /* Chrome, Safari, Opera */
　　　　　　　-moz-column-count: 3; /* Firefox */
　　　　　　　　　　　　column-count: 3;　
}

Impostazione del numero di colonne o della larghezza

Le proprietà CSS column-count e column-width specificano se e quante colonne verranno visualizzate. L'attributo column-count imposta il numero di colonne all'interno dell'elemento multicol, mentre l'attributo column-width imposta la larghezza delle colonne necessarie.

p {
　　　　-webkit-column-width: 150px; /* Chrome, Safari, Opera */
　　　　　　　-moz-column-width: 150px; /* Firefox */
　　　　　　　　　　　　column-width: 150px;　
}

Impostazione della distanza tra le colonne

Puoi utilizzare l'attributo column-gap per specificare lo spazio tra le colonne. La stessa distanza è applicata tra ogni colonna. La distanza predefinita è normal, che è uguale a 1em.

p {
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-column-count: 3;
　　　　-webkit-column-gap: 100px;
　　　　/* Firefox */
　　　　-moz-column-count: 3;
　　　　-moz-column-gap: 100px;
　　　　
　　　　column-count: 3;
　　　　column-gap: 100px;
}

Impostazione della regola delle colonne

Puoi anche utilizzare l'attributo column-rule per aggiungere una linea tra le colonne, detta regola. È un attributo abbreviato utilizzato per impostare la larghezza, lo stile e il colore della regola in una singola dichiarazione. L'attributo column-rule utilizza gli stessi valori di border e outline.

p {
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-column-count: 3;
　　　　-webkit-column-gap: 100px;
　　　　-webkit-column-rule: 2px solid red;
　　　　/* Firefox */
　　　　-moz-column-count: 3;
　　　　-moz-column-gap: 100px;
　　　　-moz-column-rule: 2px solid red;
　　　　
　　　　column-count: 3;
　　　　column-gap: 100px;
　　　　column-rule: 2px solid red;
}

Proprietà a più colonne CSS3

La tabella seguente riassume brevemente tutte le proprietà a più colonne: