English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manuale di riferimento CSS

Regole CSS (@RULES)

Completo di attributi CSS

Metodo di utilizzo e esempio dell'attributo CSS3 column-fill

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"

Sintassi dell'uso di column-fill

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‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questo attributo.

ValoreDescrizione
autoRiempimento sequenziale delle colonne, in modo che la lunghezza delle colonne possa variare a seconda dei valori degli altri attributi delle colonne.
balanceRiempimento 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.
initialImposta questo attributo al suo valore predefinito.
inheritSe specificato, l'elemento correlato utilizza il valore dell'attributo column-fill del suo elemento padre.

Compatibilità dei browser

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.

  • Firefox 13+ -moz-

  • Google Chrome×

  • Internet Explorer ×

  • Apple Safari ×

  • Opera ×

Leggi di più

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.