Proprietà CSS riempimento colonne
Esempio
Specifica come riempire le colonne:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La column-fill
proprietà specifica come riempire le colonne, bilanciate o meno.
Suggerimento: se aggiungi un'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.
Valore di default: | bilancia |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.columnFill="auto" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -moz- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Sintassi CSS
column-fill: balance|auto|initial|inherit;
Valori di proprietà
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Dividi il testo in un elemento <div> in tre colonne:
div
{
column-count: 3;
}
Esempio
Specificare uno spazio di 40 pixel tra le colonne:
div
{
column-gap: 40px;
}
Esempio
Specificare la larghezza, lo stile e il colore della regola tra le colonne:
div
{
column-rule: 4px double #ff00ff;
}
Pagine correlate
Tutorial CSS: CSS Multiple Columns
Riferimento HTML DOM: proprietà columnFill