CSS3 plusieurs colonnes
Propriétés multi-colonnes CSS3
Dans ce chapitre, nous apprendrons les propriétés multi-colonnes CSS3 suivantes :
nombre de colonnes
espace-colonne
style de règle de colonne
colonne - largeur de règle
colonne-rule-color
colonne-rule
colonne- span
column-width
CSS3 crée plusieurs colonnes
l'attribut column-count spécifie les colonnes qui ont besoin être un numéro partagé.
L'exemple suivant divise le texte de l'élément <div> en 3 colonnes :
Exemple
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <div class="newspaper"> “当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。” </div> </body> </html>
Exécuter le programme Essayez-le
Espace entre les colonnes dans plusieurs colonnes CSS3
L'attribut column-gap spécifie l'écart entre les colonnes.
L'exemple suivant spécifie un écart de 40 pixels entre les colonnes :
Exemple
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } </style> </head> <body> <div class="newspaper"> 累,就是常常徘徊在坚持和放弃之间,举棋不定。累了,就休息一下;烦了,就放松一下。谁也无法去替代你的忧虑,正如无法分享你的幸福;谁也无法取舍你的选择,正如无法左右你的脚步。一切随意就好,希望了会失望。淡淡的来,淡淡的去,淡淡的相处,给人以宁静,予己以清幽 </div> </body> </html>
Exécutez le programme pour l'essayer out
Bordure de colonne CSS3
la propriété column-rule-style spécifie le style de bordure entre les colonnes :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:dotted; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:dotted; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:dotted; } </style> </head> <body> <div class="newspaper"> 累,就是常常徘徊在坚持和放弃之间,举棋不定。累了,就休息一下;烦了,就放松一下。谁也无法去替代你的忧虑,正如无法分享你的幸福;谁也无法取舍你的选择,正如无法左右你的脚步。一切随意就好,希望了会失望。淡淡的来,淡淡的去,淡淡的相处,给人以宁静,予己以清幽</div> </body> </html>
Exécutez le programme pour l'essayer
l'attribut column-rule-width spécifie deux colonnes épaisseur de la bordure :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:outset; column-rule-width:10px; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:outset; -moz-column-rule-width:10px; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:outset; -webkit-column-rule-width:1px; } </style> </head> <body> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html>
Exécutez le programme pour l'essayer
L'attribut column-rule-color précise la couleur de la bordure des deux colonnes :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:outset; column-rule-color:#ff0000; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:outset; -moz-column-rule-color:#ff0000; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:outset; -webkit-column-rule-color:#ff0000; } </style> </head> <body> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html>
Exécutez le programme et essayez-le
l'attribut column-rule est l'abréviation de tous les attributs de column-rule-*.
L'exemple suivant définit l'épaisseur, le style et la couleur de la bordure de la colonne :
Exemple
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:4px outset #ff00ff; } </style> </head> <body> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html>
Exécutez le programme et essayez-le
Spécifiez le nombre de colonnes que l'élément s'étend
L'exemple suivant spécifie que le L'élément <h2> s'étend sur toutes les colonnes :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } h2 { column-span:all; -webkit-column-span:all; /* Safari and Chrome */ } </style> </head> <body> <div class="newspaper"> <h2>英国维斯米斯特教堂碑文</h2> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html>
Exécutez le programme pour l'essayer
Spécifiez la largeur de la colonne
l'attribut column-width spécifie la largeur de la colonne.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { column-width:100px; -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */ } </style> </head> <body> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html>
Exécutez le programme et essayez-le
Propriétés multi-colonnes de CSS3
Le tableau suivant répertorie tous les attributs CSS3 multi-colonnes :
属性 | 描述 |
---|---|
column-count | 指定元素应该被分割的列数。 |
column-fill | 指定如何填充列 |
column-gap | 指定列与列之间的间隙 |
column-rule | 所有 column-rule-* 属性的简写 |
column-rule-color | 指定两列间边框的颜色 |
column-rule-style | 指定两列间边框的样式 |
column-rule-width | 指定两列间边框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的宽度 |
columns | 设置 column-width 和 column-count 的简写 |