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>