Proprietà column-width
La proprietà column-width imposta la larghezza
delle colonne in testo multicolonna. I valori
della proprietà sono qualsiasi unità
per dimensioni, eccetto le percentuali, oppure la parola chiave
auto (predefinita). Con il valore
auto il browser sceglie automaticamente la
larghezza ottimale delle colonne in base a column-count
e column-gap.
Sintassi
selettore {
column-width: valore;
}
Esempio . Larghezza specificata
In questo esempio è stata specificata la larghezza della colonna column-width
in 150px, mentre il loro numero column-count
è impostato su auto. Di conseguenza
la larghezza delle colonne sarà di 150px, il loro numero
e lo spazio tra di esse sarà scelto automaticamente dal browser:
<div id="elem">
some long text
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
Esempio . Valore auto
In questo esempio il testo verrà suddiviso in 3
colonne (poiché column-width è
impostato su 3), mentre la loro larghezza sarà calcolata
automaticamente:
<div id="elem">
some long text
</div>
#elem {
column-width: auto;
column-count: 3;
text-align: justify;
}
:
Vedi anche
-
la proprietà
column-count,
che imposta il numero di colonne -
la proprietà
column-gap,
che imposta lo spazio tra le colonne -
la proprietà
column-rule,
che imposta il bordo tra le colonne -
la proprietà
column-span,
che imposta il numero di colonne su cui deve estendersi un elemento -
la proprietà
columns,
che è una proprietà abbreviata per il layout multicolonna
