Riempimento colonna - Trucchi CSS

Sommario

Quando aggiungi l'altezza a un elemento a più colonne, puoi controllare il modo in cui il contenuto riempie le colonne. Il contenuto può essere bilanciato o riempito in sequenza.

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Questa proprietà è disponibile solo in Firefox. Firefox bilancerà automaticamente il contenuto in un layout a più colonne con limiti di altezza. Gli altri browser riempiranno sempre le colonne in sequenza quando viene assegnato un vincolo di altezza.

Per fare in modo che Firefox si comporti come gli altri browser, cioè riempire le colonne in sequenza, puoi impostare column-fill: auto.

Valori

column-fillaccetta i valori delle parole chiave balancee auto.

balanceriempirà ogni colonna con circa la stessa quantità di contenuto, ma non consentirà alle colonne di crescere più alte di height. Potresti scoprire che le colonne appariranno più corte rispetto a heightquando il browser distribuisce il contenuto in modo uniforme in orizzontale.

autoriempirà ogni colonna fino a raggiungere heighte lo farà finché non si esaurirà il contenuto. Dato il contenuto, questo valore non riempirà necessariamente tutte le colonne né le riempirà in modo uniforme.

È un po 'come versare il succo nei bicchieri. Puoi versare una quantità uguale di succo in ogni bicchiere e scoprire di non riempire ogni bicchiere fino in cima ( balance). In alternativa, puoi riempire un bicchiere fino a riempirlo e ripetere l'operazione finché non rimane più succo. Di conseguenza, i bicchieri rimanenti potrebbero avere meno o nessun succo ( auto).

Vedi l'esempio di riempimento della colonna della penna (CSS-Tricks) di CSS-Tricks (@ css-tricks) su CodePen.

Supporto browser

I column-fillvalori delle parole chiave funzionano specificamente in Firefox. Non hanno funzionato nell'agosto 2014 quando questa voce di Almanacco è stata scritta originariamente, ma lo fa quando viene nuovamente testata nell'agosto 2015 (Chrome 44). Durante quel test, sembra che la modifica del valore dinamicamente non sarebbe necessaria, hai dovuto forzare un relayout.

Supporto del browser per il layout a più colonne in generale: