Proprietà CSS a larghezza di colonna
Esempio
Specifica che la larghezza della colonna deve essere 100px:
div
{
column-width: 100px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La column-width
proprietà specifica la larghezza della colonna.
Il numero di colonne sarà il numero minimo di colonne necessarie per mostrare tutto il contenuto nell'elemento.
column-width
è una proprietà flessibile. Pensa
column-width
a un suggerimento di larghezza minima per il browser. Una volta che il browser non può contenere almeno due colonne alla larghezza specificata, le colonne si fermeranno e si ridurranno in un'unica colonna.
Valore di default: | auto |
---|---|
Ereditato: | no |
Animabile: | sì. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.columnWidth="100px" |
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 | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Sintassi CSS
column-width: auto|length|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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à columnWidth