Colonnes CSS
- Page précédente Pagination CSS
- Page suivante Interface utilisateur 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; }
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; }
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; }
column-rule-width
L'attribut stipule la largeur de la règle entre les colonnes :
Exemple
div { column-rule-width: 1px; }
column-rule-color
L'attribut stipule la couleur de la règle entre les colonnes :
Exemple
div { column-rule-color: lightblue; }
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; }
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; }
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; }
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. |
- Page précédente Pagination CSS
- Page suivante Interface utilisateur CSS