首页 > Web开发 > 详细

CSS3 多列布局 column

时间:2020-08-22 10:39:45      阅读:58      评论:0      收藏:0      [点我收藏+]
CSS3多列布局
  • column-count         指定元素应该被分割的列数。
  • column-fill              指定如何填充列
  • column-gap            指定列与列之间的间隙
  • column-rule             所有 column-rule-* 属性的简写
  • column-rule-color   指定两列间边框的颜色
  • column-rule-style   指定两列间边框的样式
  • column-rule-width   指定两列间边框的厚度
  • columns                   设置 column-width 和 column-count 的简写
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>多列布局</title> 
 6 <style> 
 7 .newspaper
 8 {
 9     column-count:3;
10     column-gap:40px;
11     column-rule-style:dotted;
12 
13     /* Firefox */
14     -moz-column-count:3;
15     -moz-column-gap:40px;
16     -moz-column-rule-style:dotted;
17 
18     /* Safari and Chrome */
19     -webkit-column-count:3;
20     -webkit-column-gap:40px;
21     -webkit-column-rule-style:dotted;
22 }
23 </style>
24 </head>
25 <body>
26 <div class="newspaper">
27 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
28 </div>
29 
30 </body>
31 </html>

 

CSS3 多列布局 column

原文:https://www.cnblogs.com/hjcby/p/13544282.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!