Esempio
Specificare come riempire le colonne:
div
{
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà column-fill specifica come riempire le colonne, equilibrati o no.
| Valore di default: | balance |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.columnFill="auto" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| column-fill | Non supportato | Non supportato | 13,0 -moz- | Non supportato | Non supportato |
CSS Sintassi
column-fill: balance|auto|initial|inherit;I valori delle proprietà
| Valore | Descrizione |
|---|---|
| balance | Valore di default. Le colonne sono equilibrati. Browser dovrebbe minimizzare la variazione della lunghezza della colonna |
| auto | Le colonne sono riempite in sequenza, e avranno lunghezze diverse |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Column-count
Dividere il testo in un <div> elemento in tre colonne:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Prova tu stesso " Colonna-gap
Dividere il testo in un <div> elemento in tre colonne, e specificare un intervallo di 40 pixel tra le colonne.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Prova tu stesso " Column-rule
Specificare la larghezza, lo stile e il colore della regola tra le colonne.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Prova tu stesso " Pagine correlate
CSS3 tutorial: CSS3 più colonne
Di riferimento HTML DOM: columnFill property