CSS3 multi-colonna
contenuto di testo CSS3 può essere progettato come un layout a più colonne di giornale, i seguenti esempi:
Questo tutorial - la scienza non è solo tecnologia, ma anche un sogno! Questo tutorial (www.w3big.com) fornisce il tutorial più completa tecnologia di programmazione basato introduce le nozioni di base di HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL, e altri linguaggi di programmazione. Ma il sito fornisce anche una serie di esempi online, a titolo di esempio, si può meglio imparare programmazione.
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione metodo.
Subito dopo il browser il numero -webkit- o il prefisso -moz- specificato.
| proprietà | |||||
|---|---|---|---|---|---|
| column-count | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| column-gap | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| column-rule | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| column-rule-colore | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| column-rule-style | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| column-rule-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| column-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
CSS3 proprietà multi-colonna
In questo capitolo impareremo qualche proprietà delle colonne di CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 per creare più colonne
column-count attributo specifica il numero di colonne devono essere divisi.
L'elemento seguente esempio <div> nel testo è diviso in tre:
Esempi
-webkit-column-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
column-count: 3;
}
Prova »
CSS3 gap più colonne tra le colonne e colonne
column-gap proprietà specifica la distanza tra le colonne e colonne.
L'esempio seguente specifica il divario tra la colonna e la colonna è di 40 pixel:
Esempi
-webkit-column-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
column-gap: 40px;
}
Prova »
bordi delle colonne CSS3
column-rule-style proprietà specifica le colonne di stile di confine tra le colonne:
Esempi
-webkit-column-rule-style: solido; / * Chrome, Safari, Opera * /
-moz-column-rule-style: solido; / * Firefox * /
column-rule-style: solido;
}
Prova »
column-rule-width attributo specifica lo spessore del bordo dei due:
Esempi
-webkit-column-rule-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
column-rule-width: 1px;
}
Prova »
column-rule-color attributo specifica il colore del bordo dei due:
Esempi
-webkit-column-rule-colore: azzurro; / * Chrome, Safari, Opera * /
-moz-column-rule-colore: azzurro; / * Firefox * /
column-rule-colore: azzurro;
}
Prova »
column-rule proprietà è una scorciatoia per tutte le proprietà delle colonne-su regole *.
L'esempio seguente imposta la colonna direttamente per lo spessore del bordo, colore e lo stile:
Esempi
-webkit-column-rule: 1px solid azzurro; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid azzurro; / * Firefox * /
column-rule: 1px solid azzurro;
}
Prova »
Quante colonne attraverso l'elemento specificato
L'esempio seguente specifica l'elemento <h2> in tutte le colonne:
Esempi
-webkit-colonna della vita: tutto; / * Chrome, Safari, Opera * /
Colonna della vita: tutti;
}
Prova »
Specifica la larghezza delle colonne
column-width attributo specifica la larghezza della colonna.
Esempi
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
column-width: 100px;
}
Prova »
CSS3 proprietà multi-colonna
La seguente tabella elenca tutti gli attributi di CSS3 a più colonne:
| proprietà | descrizione |
|---|---|
| column-count | Il numero di colonne specificate elemento dovrebbe essere divisa. |
| column-fill | Specifica come riempire le colonne |
| column-gap | Specifica la distanza tra le colonne e le colonne |
| column-rule | Tutti * proprietà scorciatoia colonna su regole |
| column-rule-colore | Specifica il colore del confine tra i due |
| column-rule-style | Specificare lo stile del confine tra i due |
| column-rule-width | Specifica lo spessore del confine tra i due |
| colonna arco | Specifica il numero di colonne da attraversare elemento |
| column-width | Specifica la larghezza delle colonne |
| colonne | Impostazione column-width e column-count stenografia |