多列

最新推荐文章于 2024-01-14 18:44:54 发布

weixin_30295091

最新推荐文章于 2024-01-14 18:44:54 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MdpHappyForEver/p/5326535.html

本文介绍了如何使用CSS实现内容的多列布局效果，包括设置列数、列间距及列边框样式等关键技术点。

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 }