多列-HappyForEverIsaDream

来源：懂视网责编：小采时间：2020-11-27 16:43:01

多列-HappyForEverIsaDream

多列-HappyForEverIsaDream: 1 .newspaper 2 { 3 -moz-column-count:3; /* Firefox */ 4 -webkit-column-count:3; /* Safari and Chrome */ 5 column-count:3; 6 } 7 在当前div的宽度中，将内容分为3列显示 View Code 1 .newspaper 2 { 3 -moz-column-count:3; /* Firefox */ 4 -webkit-column-c

推荐度：

点击下载本文 文档为doc格式

导读多列-HappyForEverIsaDream: 1 .newspaper 2 { 3 -moz-column-count:3; /* Firefox */ 4 -webkit-column-count:3; /* Safari and Chrome */ 5 column-count:3; 6 } 7 在当前div的宽度中，将内容分为3列显示 View Code 1 .newspaper 2 { 3 -moz-column-count:3; /* Firefox */ 4 -webkit-column-c

1 .newspaper
2 {
3 -moz-column-count:3; /* Firefox */
4 -webkit-column-count:3; /* Safari and Chrome */
5 column-count:3;
6 }
7 在当前div的宽度中，将内容分为3列显示

View Code

 1 .newspaper
 2 {
 3 -moz-column-count:3; /* Firefox */
 4 -webkit-column-count:3; /* Safari and Chrome */
 5 column-count:3;
 6 
 7 -moz-column-gap:30px; /* Firefox */
 8 -webkit-column-gap:30px; /* Safari and Chrome */
 9 column-gap:30px;
10 }
11 当前div 中内容分为三列显示，列之间的距离是30px.

View Code

 1 .newspaper
 2 {
 3 -moz-column-count:3; /* Firefox */
 4 -webkit-column-count:3; /* Safari and Chrome */
 5 column-count:3;
 6 
 7 -moz-column-gap:40px; /* Firefox */
 8 -webkit-column-gap:40px; /* Safari and Chrome */
 9 column-gap:40px;
10 
11 -moz-column-rule:4px outset #ff0000; /* Firefox */
12 -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
13 column-rule:4px outset #ff0000;
14 }

View Code