Proprietà colonne CSS
Esempio
Specificare la larghezza minima per ciascuna colonna e il numero massimo di colonne:
div
{
columns: 100px 3;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La columns
proprietà è una proprietà abbreviata per:
La parte relativa alla larghezza delle colonne definirà la larghezza minima per ciascuna colonna, mentre la parte relativa al conteggio delle colonne definirà il numero massimo di colonne. Utilizzando questa proprietà, il layout a più colonne verrà automaticamente suddiviso in un'unica colonna con larghezze del browser ridotte, senza la necessità di media query o altre regole.
Valore di default: | macchina per auto |
---|---|
Ereditato: | no |
Animabile: | sì, vedi singole proprietà . Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.columns="100px 3" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- o -moz- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
columns | 50.0 4.0 -webkit- |
10.0 | 52.0 9.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Sintassi CSS
columns: auto|column-width column-count|initial|inherit;
Valori di proprietà
Value | Description |
---|---|
auto | Default value. Sets both the column-width and column-count to "auto" |
column-width | Defines the minimum width for each column |
column-count | Defines the maximum number of columns |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Dividi il testo in un elemento <div> in tre colonne:
div
{
column-count: 3;
}
Esempio
Specificare uno spazio di 40 pixel tra le colonne:
div
{
column-gap: 40px;
}
Esempio
Specificare la larghezza, lo stile e il colore della regola tra le colonne:
div
{
column-rule: 4px double #ff00ff;
}
Pagine correlate
Tutorial CSS: CSS Multiple Columns
Riferimento HTML DOM: proprietà colonne