CSS column-fill
La proprietà CSS column-fill (CSS3): controlla il riempimento del contenuto nelle colonne
La proprietà column-fill determina come il contenuto viene distribuito tra più colonne. Con balance, il contenuto viene suddiviso in modo uniforme, mentre con auto, viene inserito in una colonna per volta. Questa proprietà è utile quando si lavora con contenitori di altezza fissa.
Sintassi
Significato dei valori principali:
-
balance: (predefinito) Cerca di distribuire il contenuto in modo uniforme tra tutte le colonne disponibili.
-
auto: Riempe le colonne una alla volta, lasciando le successive vuote se non c'è abbastanza contenuto.
Nota: la proprietà column-fill ha effetto solo su contenitori con altezza esplicitamente definita.
Esempio proprietà: column-fill
Codice Esempio: column-fill
.column-fill-container {
height: 200px;
column-count: 3;
column-gap: 20px;
background-color: #fdfdfd;
padding: 15px;
font-size: 15px;
line-height: 1.5;
margin-bottom: 30px;
border-radius: 8px;
}.balance {
column-fill: balance;
}.auto {
column-fill: auto;
}
Contenuto Esempio: column-fill
Esempio di utilizzo di column-fill
Confronto tra column-fill: balance e column-fill: auto su contenitori con altezza fissa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut dapibus leo. Aenean hendrerit nisl at bibendum dignissim. Donec ut felis sit amet turpis pretium tincidunt. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut dapibus leo. Aenean hendrerit nisl at bibendum dignissim. Donec ut felis sit amet turpis pretium tincidunt. Suspendisse potenti.
CSS e HTML per l'esempio con column-fill:
<style>
.column-fill-container {
height: 200px;
column-count: 3;
column-gap: 20px;
background-color: #fdfdfd;
padding: 15px;
font-size: 15px;
line-height: 1.5;
margin-bottom: 30px;
border-radius: 8px;
}
.balance {
column-fill: balance;
}
.auto {
column-fill: auto;
}
</style>
<div class="column-fill-container balance">
<strong>column-fill: balance;</strong>
Lorem ipsum dolor sit amet...
</div>
<div class="column-fill-container auto">
<strong>column-fill: auto;</strong>
Lorem ipsum dolor sit amet...
</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.192
