English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo CSS column-fill specifica come la lunghezza delle colonne degli elementi multicolumna viene influenzata dal flusso del contenuto. Il contenuto nel layout multicolumna è bilanciato, il che significa che il contenuto in tutte le colonne avrà la stessa altezza, o utilizzando il valore auto, occuperà solo lo spazio necessario per soddisfare le esigenze del contenuto.
La tabella sottostante fornisce spiegazioni sull'uso di questo attributo, la cronologia delle versioni e la sintassi dell'uso in script JavaScript.
Valore predefinito: | balance |
---|---|
Applicabile a: | Elementi a più colonne |
Ereditabile: | No |
Animabile: | No Attributi animazione. |
Versione: | Nuova funzionalità del CSS3 |
Sintassi JavaScript: | object.style.columnFill="auto" |
La sintassi di questo attributo è la seguente:
column-fill: auto | balance | initial | inherit
Ecco un esempio di come utilizzare l'attributo column-fill.
p { -moz-column-fill: auto; /* Firefox */ column-fill: auto; }Prova a vedere‹/›
La tabella sottostante descrive i valori di questo attributo.
Valore | Descrizione |
---|---|
auto | Riempimento sequenziale delle colonne, in modo che la lunghezza delle colonne possa variare a seconda dei valori degli altri attributi delle colonne. |
balance | Riempimento sequenziale delle colonne, in modo che le altezze delle colonne possano essere bilanciate il più possibile in base ai valori degli altri attributi delle colonne. |
initial | Imposta questo attributo al suo valore predefinito. |
inherit | Se specificato, l'elemento correlato utilizza il valore dell'attributo column-fill del suo elemento padre. |
La compatibilità dei browser con l'attributo column-fill, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; al momento solo il browser Firefox supporta questo attributo.
|
Ecco come fare riferimento ai seguenti tutorial:Layout a più colonne del CSS3.
Proprietà correlate:column-width,column-gap,column-rule,column-rule-width,column-rule-style,column-rule-color,column-span,column-count,columns.