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