Colonnes CSS

Mise en page en colonnes multiples de CSS

La mise en page en colonnes multiples de CSS nous permet de définir facilement du texte en colonnes multiples - comme dans un journal :

Romance des Trois Royaumes

Première partie
Les héros de la grotte de桃园 ont fait trois pactes
La décapitation des héros des Yellow Turbans a établi la première victoire

On dit que les grandes tendances du monde, après une période de division, s'unissent nécessairement, et après une période d'unification, s'éparpillent nécessairement : à la fin de la dynastie Zhou, les sept royaumes se disputaient, puis ont été absorbés par la dynastie Qin ; après la chute de la dynastie Qin, les royaumes de Chu et de Han se disputaient, puis ont été absorbés par la dynastie Han ; la dynastie Han, depuis que le fondateur Gaozu a coupé la serpente blanche et a levé les armes, a unifié le monde. Plus tard, la dynastie Han a été relancée, et a été transmise à l'empereur Xian, qui a ensuite été divisé en trois royaumes. Si l'on analyse les causes de cette désunion, elles remontent probablement aux empereurs Huandi et Lingdi. Huandi a banni les gens vertueux, et a cru en la noblesse des eunuques. Après la mort de Huandi, Lingdi est devenu empereur, le généralissime Dou Wu et le prince-féodal Chen Fan ont tous deux aidé à le conseiller ; à cette époque, les eunuques comme Cao Jie avaient le pouvoir, Dou Wu et Chen Fan ont planifié de les éliminer, mais les affaires n'étaient pas bien gardées, et ils ont été tués par eux-mêmes. Depuis lors, les eunuques ont encore plus de pouvoir. Le quatorzième jour du quatrième mois de l'année Jiaxing, l'empereur est monté sur le trône du palais Wende. Juste avant de s'asseoir, un vent furieux s'est levé dans le coin du palais. Une grande serpente verte est apparue volant du pendentif, s'enroulant autour du fauteuil. L'empereur est tombé de son fauteuil, et a été secouru par ses gardes du corps et emmené dans le palais. Tous les fonctionnaires ont fui. Bientôt, le serpent a disparu. Soudain, il y a eu un grand tonnerre et une grande pluie, avec des grêles, qui ont continué jusqu'à minuit. De nombreuses maisons ont été détruites. En février de l'année Jiaxing 4, un tremblement de terre s'est produit à Luoyang ; et l'océan a déborde, les habitants de la côte ont été emportés par les vagues. En l'an 168, une poule femelle s'est transformée en poule mâle. Le premier jour du sixième mois, une masse noire de plus de dix coudes s'est envolée et est entrée dans le palais Wende. En juillet de l'année autumnale, un arc-en-ciel est apparu sur le palais d'or, et les rives des montagnes de Wuyuan ont toutes été ébranlées. Ces diverses malédictions ne sont pas limitées à un seul aspect. L'empereur a ordonné aux membres du conseil de lui dire la cause des malédictions, le conseiller en service Cai Yong a soumis une déclaration, affirmant que la transformation d'une poule en coq et la chute de la serpente étaient dues à l'intervention des femmes et des eunuques dans les affaires d'État, et ses mots étaient tranchants et directs. L'empereur, après avoir lu la déclaration, a soupiré et s'est levé pour se changer. Cao Jie, qui se tenait derrière, a regardé silencieusement et a révélé cela à ses gardes du corps ; par conséquent, il a trouvé des motifs pour accuser Cai Yong de crime et l'a expulsé dans les campagnes. Après cela, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng, ces dix personnes ont conspiré ensemble et ont été surnommés 'les dix eunuques permanents'. L'empereur tenait Zhang Rang en haute estime, et l'appelait 'père'. La politique du gouvernement devenait de plus en plus mauvaise, ce qui a conduit à ce que les cœurs des gens dans le monde entier deviennent agités, et les bandits éclatent comme des fleurs en automne.

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

Attributs multicolumn CSS

Dans ce chapitre, vous apprendrez les attributs multicolumn suivants :

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

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Attribut Chrome IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

Créer des colonnes CSS

column-count L'attribut détermine le nombre de colonnes que l'élément doit diviser.

L'exemple suivant divise le texte de l'élément <div> en 3 colonnes :

Exemple

div {
  column-count: 3;
}

Essayez-le vous-même

Définir l'intervalle entre les colonnes CSS

column-gap L'attribut détermine l'intervalle entre les colonnes :

L'exemple suivant spécifie que l'intervalle entre les colonnes doit être de 40 pixels :

Exemple

div {
  column-gap: 40px;
}

Essayez-le vous-même

Règle de colonne CSS

column-rule-style L'attribut détermine le style de la règle entre les colonnes :

Exemple

div {
  column-rule-style: solid;
}

Essayez-le vous-même

column-rule-width L'attribut détermine la largeur de la règle entre les colonnes :

Exemple

div {
  column-rule-width: 1px;
}

Essayez-le vous-même

column-rule-color L'attribut détermine la couleur de la règle entre les colonnes :

Exemple

div {
  column-rule-color: lightblue;
}

Essayez-le vous-même

L'attribut column-rule est utilisé pour définir la propriété abrégée de tous les attributs column-rule-*.

L'exemple suivant définit la largeur, le style et la couleur de la règle entre les colonnes :

Exemple

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

Essayez-le vous-même

Spécifier combien de colonnes l'élément doit couvrir

column-span L'attribut détermine combien de colonnes l'élément doit couvrir.

L'exemple suivant détermine que l'élément <h2> doit couvrir toutes les colonnes :

Exemple

h2 {
  column-span: all;
}

Essayez-le vous-même

Spécifier la largeur de la colonne

column-width L'attribut spécifie la largeur recommandée optimale de la colonne.

L'exemple suivant détermine que la largeur recommandée de la colonne doit être de 100px :

Exemple

div {
  column-width: 100px;
}

Essayez-le vous-même

Attributs multicolumn CSS

Le tableau suivant liste tous les attributs de multicolumn :

Attribut Description
column-count Définir le nombre de colonnes que l'élément doit diviser.
column-fill Définir comment remplir les colonnes.
column-gap Spécifier l'intervalle entre les colonnes.
column-rule Utilisé pour définir la propriété abrégée de tous les attributs column-rule-*.
column-rule-color Définir la couleur de la règle entre les colonnes.
column-rule-style Définir le style de la règle entre les colonnes.
column-rule-width Définir la largeur de la règle entre les colonnes.
column-span Définir le nombre de colonnes que l'élément doit couvrir.
column-width Définir la largeur recommandée pour les colonnes.
columns Propriétés abrégées pour définir column-width et column-count.