CSS column-width
La proprietà CSS3 column-width imposta la larghezza ideale delle colonne
La proprietà column-width specifica la larghezza ideale per ciascuna colonna in un layout multi-colonna. Il browser determina quante colonne creare in base a questa larghezza e alla larghezza disponibile del contenitore. È utile per controllare in modo flessibile la disposizione del testo su più colonne.
Sintassi
Significato dei valori principali:
-
lunghezza: indica la larghezza desiderata per ogni colonna. Può essere espressa in
px,em,rem,vw, ecc. Il browser adatterà automaticamente il numero di colonne. -
auto: valore predefinito. Il browser determina la larghezza delle colonne automaticamente in base ad altri fattori.
Esempio proprietà: column-width
Codice Esempio: column-width
.column-width-container {
column-width: 200px;
column-gap: 30px;
padding: 20px;
background-color: #e0f7fa;
font-size: 16px;
line-height: 1.6;
}
Contenuto Esempio: column-width
Esempio di utilizzo di column-width
In questo esempio, il contenuto viene suddiviso automaticamente in colonne larghe circa 200px grazie alla proprietà column-width:
CSS e HTML per l'esempio:
<style>
.column-width-container {
column-width: 200px;
column-gap: 30px;
padding: 20px;
background-color: #e0f7fa;
font-size: 16px;
line-height: 1.6;
}
</style>
<div class="column-width-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.221
