Colonnes CSS

La 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 :

Les Trois Royaumes

Le premier épisode
La réunion des héros de la Pétau
La décapitation des héros des Huangjin

Il est dit que le cours des événements du monde, après une longue séparation, doit se réunir, et après une longue réunion, il doit se séparer : à la fin de la dynastie Zhou, les sept États se disputaient, et 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 empereur Gaozu a coupé la serpente et a levé les armes, a unifié le monde. Plus tard, la dynastie Han des temps modernes a repris, et a été transmise à l'empereur Xian, puis elle s'est divisée en trois royaumes. En examinant les causes de la confusion, elles semblent commencer avec les empereurs Huandi et Lingdi. Huandi a confiné les personnes vertueuses, et a eu confiance en les eunuques. Après la mort de Huandi, Lingdi est devenu empereur, le généralissime Dou Wu et le préfet Chen Fan ont tous deux aidé à gouverner. À cette époque, les eunuques comme Cao Jie ont pris le pouvoir, Dou Wu et Chen Fan ont planifié de les éliminer, mais l'affaire n'était pas bien gardée secrète, et ils ont été tués par eux-mêmes. Depuis lors, les eunuques ont été de plus en plus autoritaires. Le 15 avril du deuxième année de la dynastie Jian宁, l'empereur a visité le palais Wende. Alors qu'il montait sur son siège, un vent violent s'est levé dans l'angle du palais. Une grande serpente verte est apparue et s'est enroulée autour du fauteuil. L'empereur s'est étouffé, et les gardes du corps l'ont rapidement aidé à rentrer dans le palais, et tous les officiers ont fui. Un moment plus tard, le serpent avait disparu. Soudain, il y a eu de grosses trombes d'eau et de grêle, qui ont continué jusqu'à minuit. De nombreuses maisons ont été détruites. En février de la quatrième année de la dynastie Jian宁, il y a eu un tremblement de terre à Luoyang ; et l'eau de mer a débordé, les habitants de la côte ont été emportés par les vagues dans la mer. En l'an 168, une poule femelle s'est transformée en coq. 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, un arc-en-ciel est apparu sur l'Arhat Hall, et les rives de la montagne Wu yuan ont tous été fissurées. Tous ces événements maléfiques ne sont pas un seul et unique. L'empereur a ordonné aux membres du conseil des ministres de demander la cause des calamités naturelles, et le conseiller Cai Yong a soumis une déclaration, affirmant que la déchéance des poules et la transformation des coqs étaient causées par l'intervention des femmes et des eunuques dans les affaires d'État, et ses mots étaient tranchants et directs. L'empereur a lu le rapport avec tristesse et a décidé de se changer les vêtements. Cao Jie, qui se trouvait derrière, a regardé silencieusement et a révélé tout cela à ses gardes du corps ; par la suite, il a trouvé d'autres moyens pour accusé Cai Yong de crimes et l'a renvoyé dans sa ferme. Plus tard, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, JIan Shuo, Cheng Kuang, Xia Yun, Guo Sheng, les dix ont formé une clique pour se faire du mal, et étaient connus sous le nom de 'Dix Eunuques Permanents'. L'empereur avait une grande confiance en Zhang Rang, et l'appelait 'Père'. La politique du gouvernement devenait de plus en plus mauvaise, ce qui a conduit à une pensée de désordre dans le cœur des gens du monde entier, et les bandits ont commencé à émerger en grand nombre.

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

Attributs multicolonne CSS

Dans ce chapitre, vous apprendrez les attributs multicolonne 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 nombres 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 stipule le nombre de colonnes que l'élément doit diviser.

L'exemple suivant divise le texte dans 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 stipule 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 stipule 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 stipule 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 stipule 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 le nombre de colonnes que l'élément doit couvrir

column-span Attribut stipule combien de colonnes l'élément doit couvrir.

L'exemple suivant stipule 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 Attribut pour spécifier la largeur recommandée optimale des colonnes.

L'exemple suivant stipule que la largeur recommandée pour les colonnes devrait être de 100px :

Exemple

div {
  column-width: 100px;
}

Essayez-le vous-même

Attributs multicolonne CSS

Le tableau suivant liste tous les attributs multicolonne :

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 doit couvrir un élément.
column-width Définir la largeur recommandée pour les colonnes.
columns Propriété abrégée pour définir column-width et column-count.