多列 - 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-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