Colonne CSS

La layout a più colonne di CSS

La layout a più colonne di CSS ci permette di definire facilmente il testo a più colonne - come un giornale:

Il romanzo delle Tre Regni

Il primo capitolo
La cena a Yu Garden ha visto tre eroi unirsi
La decapitazione degli eroi dei gialli calzoni ha stabilito la prima vittoria

Parlando delle grandi tendenze del mondo, il separato diventa unito e l'unito diventa separato: alla fine del periodo Zhou, i sette stati si contendevano, e furono inglobati nella Qin; dopo la distruzione della Qin, Chu e Han si contendevano, e furono nuovamente inglobati nel Han; la dinastia Han, dopo che il fondatore Gaozu ha sconfitto il serpente bianco e ha sollevato la ribellione, ha unificato il mondo. Dopoward, la riunione di Guangwu, è stata trasmessa all'Imperatore Xian, e infine è stata divisa in tre stati. L'origine della distruzione può essere ricondotta a Huan e Ling, due imperatori. L'imperatore Huan ha limitato i buoni, e ha creduto nei eunuchi. Dopo la morte dell'imperatore Huan, l'imperatore Ling è salito al trono, il generale He Wu e il cancelliere Chen Fan lo hanno aiutato a governare; in quel tempo, gli eunuchi Cao Jie e altri avevano il potere, He Wu e Chen Fan avevano pianificato di ucciderli, ma il loro piano non era segreto, e furono uccisi. Dalla allora in poi, i eunuchi sono diventati ancora più arroganti. Il 15 aprile del secondo anno di Jian宁, l'imperatore si trovava nel Palazzo Wende. Mentre stava salendo sul trono, un forte vento si è sollevato nell'angolo del palazzo. Un grande serpente azzurro è volato dal soffitto, si è avvolto attorno alla sedia. L'imperatore è caduto a terra, è stato salvato rapidamente e portato nel palazzo, i funzionari hanno fuggito. Poco dopo, il serpente è scomparso. Improvvisamente ci sono stati grandi tuoni e piogge, e anche ghiaccio, che sono durati fino a mezzanotte, distruggendo molte case. Nel febbraio del quarto anno di Jian宁, c'è stato un terremoto a Luoyang; anche l'acqua del mare è stata inondata, i residenti lungo la costa sono stati trascinati via dalle onde nel mare. Nel primo anno di Guanghao, una gallina ha cambiato sesso diventando un gallo. Il primo giorno del sesto mese, una nuvola nera di più di dieci zollie è volata nel Palazzo Wende. Nel settimo mese dell'autunno, un arcobaleno è apparso nel Palazzo Yu, le montagne di Wuyuan sono crollate. Tutti questi segni infausti non sono solo uno. L'imperatore ha emanato un editto per chiedere ai funzionari la causa delle calamità, il consigliere Cai Yong ha presentato una proposta, affermando che il cambiamento di sesso della gallina e la trasformazione della nuvola in un gallo sono il risultato dell'intervento delle donne e degli eunuchi nella politica, le sue parole erano piuttosto dirette. L'imperatore ha guardato il documento e ha sospirato, poi si è alzato per cambiarsi. Cao Jie ha guardato dietro di lui, e ha annunciato tutto ai suoi intorno; quindi Cai Yong è stato accusato di reato e inviato a vivere nella campagna. Dopoward, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng, dieci persone si sono uniti per fare il male, e sono stati chiamati 'Dieci Eunuchi'. L'imperatore ha rispettato Zhang Rang, chiamandolo 'Padre'. La politica del governo è diventata sempre peggiore, portando al desiderio della gente di tutto il mondo di essere in ribellione, e i banditi sono fioriti.

...... ......

Proprietà CSS Multi-colonna

...... ......

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • Column-span
  • Column-width

In questa sezione, imparerai le seguenti proprietà multi-colonna:

Supporto del Browser

Proprietà I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo. Chrome IE Firefox Safari
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
Column-span 71.0 50.0 Opera 52.0 9.0
Column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS Crea Multi-colonna

Proprietà stabilisce il numero di colonne che l'elemento dovrebbe essere diviso.

Esempio

div {
  L'esempio seguente suddivide il testo dell'elemento <div> in 3 colonne:
}

Prova a farlo tu stesso

column-count: 3;

column-gap CSS Specifica l'intervallo tra le colonne

Proprietà stabilisce l'intervallo tra le colonne.

Esempio

div {
  L'esempio seguente specifica che lo spaziatura tra le colonne dovrebbe essere di 40 pixel:
}

Prova a farlo tu stesso

column-gap: 40px;

column-rule-style CSS Regole di Colonna

Esempio

div {
  Proprietà stabilisce lo stile delle regole tra le colonne:
}

Prova a farlo tu stesso

column-rule-width column-rule-style: solid;

Esempio

div {
  Proprietà stabilisce la larghezza delle regole tra le colonne:
}

Prova a farlo tu stesso

column-rule-color column-rule-width: 1px;

Esempio

div {
  Proprietà stabilisce il colore delle regole tra le colonne:
}

Prova a farlo tu stesso

La proprietà column-rule è usata per impostare la proprietà abbreviata per tutti i column-rule-*.

L'esempio seguente imposta la larghezza, lo stile e il colore delle regole tra le colonne:

Esempio

div {
  column-rule: 1px solid lightblue;
}

Prova a farlo tu stesso

Specificare il numero di colonne che l'elemento dovrebbe attraversare

Column-span Proprietà stabilisce quante colonne l'elemento dovrebbe attraversare.

L'esempio seguente stabilisce che l'elemento <h2> dovrebbe attraversare tutte le colonne:

Esempio

h2 {
  column-span: all;
}

Prova a farlo tu stesso

Specificare la larghezza della colonna

Column-width Proprietà assegna una larghezza consigliata alla colonna.

L'esempio seguente stabilisce che la larghezza consigliata della colonna dovrebbe essere di 100px:

Esempio

div {
  column-width: 100px;
}

Prova a farlo tu stesso

Proprietà CSS Multi-colonna

La tabella seguente elenca tutte le proprietà multi-colonna:

Proprietà Descrizione
column-count Regola il numero di colonne da dividere l'elemento.
column-fill Regola come riempire le colonne.
column-gap Specificare lo spaziatura tra le colonne.
column-rule Usato per impostare la proprietà abbreviata per tutti i column-rule-*.
column-rule-color Regola il colore delle regole tra le colonne.
column-rule-style Regola lo stile delle regole tra le colonne.
column-rule-width Regola la larghezza delle regole tra le colonne.
Column-span Definire quante colonne un elemento dovrebbe attraversare.
Column-width Specificare la larghezza consigliata migliore per le colonne.
Columns Proprietà abbreviate per impostare column-width e column-count.