CSS3 多列布局 column

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>

 

posted @ 2020-08-22 08:31  帅气巴巴  阅读(303)  评论(0)  编辑  收藏  举报