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:

La leggenda di tre regni

Il primo capitolo
Festeggiare i eroi di Youyang e stabilire una lega di tre
Sconfiggere l'eroina dei Guanmian e ottenere la prima vittoria

Si dice che il destino del mondo è così, che dopo un lungo periodo di separazione, i paesi si riuniranno, e dopo un lungo periodo di unione, si separeranno di nuovo: alla fine del periodo Zhou, sette stati si contendevano, e furono uniti sotto la dinastia Qin; dopo la distruzione della dinastia Qin, i stati di Chu e Han si contendevano, e furono nuovamente uniti sotto la dinastia Han. La dinastia Han, da quando il fondatore Gaozu ha sconfitto il serpente bianco e ha iniziato la ribellione, ha unificato il cielo e la terra. Dopo la risurrezione di Guangwu, è stata trasmessa fino all'Imperatore Xian, e poi è stata divisa in tre stati. L'origine della distruzione può essere attribuita a Huan e Ling due imperatori. L'imperatore Huan ha represso le persone di buona volontà, e ha creduto nei eunuchi. Dopo la morte dell'imperatore Huan, l'imperatore Ling è salito al trono, il generale in capo Dou Wu e il cancelliere Chen Fan lo hanno assistito; in quel momento, gli eunuchi come Cao Jie hanno esercitato il potere, Dou Wu e Chen Fan avevano pianificato di ucciderli, ma il segreto non è stato mantenuto, e sono stati uccisi. Dalla allora in poi, i funzionari imperiali sono diventati sempre 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 all'angolo del palazzo. Solo un grande serpente azzurro è volato giù dal soffitto, avvolgendosi attorno alla sedia. L'imperatore è caduto in shock, e i suoi servitori lo hanno aiutato a entrare nel palazzo, mentre tutti i funzionari sono fuggiti. Dopo un po', il serpente è scomparso. Improvvisamente ci sono state forti tempeste e grandinate, che hanno durato fino a mezzanotte, distruggendo molte case. Nel febbraio del quarto anno di Jian宁, si è verificato un terremoto a Luoyang; anche l'acqua del mare è stata inondata, e tutti i residenti lungo la costa sono stati trascinati via dalle onde. Nel primo anno di Guanghe, una gallina ha cambiato sesso diventando un gallo. Il primo giorno del sesto mese, una nube nera di oltre dieci cubiti è volata nel palazzo Wende. Nel settimo mese dell'autunno, un arcobaleno è apparso nella Halla di Giada, e le colline di Wu yuan sono crollate. Tutti questi segni infausti non sono solo uno. L'imperatore ha emanato un editto chiedendo ai ministri la causa delle calamità, e il consigliere Cai Yong ha presentato una proposta, affermando che il mutamento della gallina e la caduta della nube sono stati causati dall'intervento delle donne e degli eunuchi nella politica, e le sue parole erano molto dirette. L'imperatore ha guardato il documento con tristezza e si è alzato per cambiarsi. Cao Jie lo ha guardato dietro le spalle e ha reso noto a tutti; quindi Cai Yong è stato accusato di reato e mandato a vivere nelle campagne. Dopo di che, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jian 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 e lo chiamava 'Padre'. La politica del palazzo è stata sempre peggiore, portando alla disperazione del popolo e all'insurrezione dei banditi.

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

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 Creare colonne multiple

Proprietà che regola il numero di colonne che l'elemento dovrebbe dividere.

Esempio

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

Prova a fare tu stesso

column-count: 3;

column-gap CSS Specificare l'intervallo tra le colonne

Proprietà che regola l'intervallo tra le colonne.

Esempio

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

Prova a fare tu stesso

column-gap: 40px;

column-rule-style CSS Regole delle colonne

Esempio

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

Prova a fare tu stesso

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

Esempio

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

Prova a fare tu stesso

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

Esempio

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

Prova a fare tu stesso

La proprietà column-rule è utilizzata per impostare la proprietà abbreviata di 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 fare tu stesso

Specificare il numero di colonne che l'elemento dovrebbe attraversare

Column-span Proprietà che 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 fare tu stesso

Specificare la larghezza della colonna

Column-width Proprietà che assegna una larghezza consigliata ottimale alle colonne.

L'esempio seguente stabilisce che la larghezza consigliata per le colonne dovrebbe essere di 100px:

Esempio

div {
  column-width: 100px;
}

Prova a fare tu stesso

Proprietà CSS multi-colonna

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

Proprietà Descrizione
column-count Regola il numero di colonne che l'elemento dovrebbe dividere.
column-fill Regola come riempire le colonne.
column-gap Specificare lo spaziatura tra le colonne.
column-rule Utilizzato per impostare la proprietà abbreviata di 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 per le colonne.
Columns Proprietà abbreviate per impostare column-width e column-count.