海阔凭鱼跃,天高任鸟飞!

天高任鸟飞

       

CSS3 Multiple Columns 属性使用详解

作者:     目录: PHP+MySQL     发表: 2010年09月17日

CSS3新增 Multiple Columns 属性,翻译成中文就是多列的意思,利用Multiple Columns属性可以自动将内容按指定的列数排列,报纸和杂志一般都采用这种布局方法

Multiple Columns 有两种设置方法:

  • CSS 3 Multiple Columns (Width):采用列宽来控制
  • CSS 3 Multiple columns (Count):采用列数来控制

CSS 3 Multiple Columns (Width) 使用示例及方法:

示例:

任鸟飞网页设计博客,是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客,作者任鸟飞。

为了能提供更多的高质量的原创技术类文章,任鸟飞网页设计博客于2010年7月份开通了任鸟飞网页设计博客联盟模块,此模块主要用于发表 任鸟飞网页设计博客联盟成员的博客文章。

如果你不经意间走到这里,那是我们的荣幸,但我们更期待你能在这里驻足,希望你能在安营扎寨。我们真诚的希望你能成为任鸟飞网页设计博客联盟的成员。如果你也乐意加入 任鸟飞网页设计博客联盟,请发邮件到 www.renniaofei.com@gmail.com 或 直接在下面留言。

CSS代码:

#CSS3_Multiple_Columns_widht {
//Firefox 浏览器设置方法
-moz-column-width: 200px;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-width: 200px;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-width: 200px; //列宽设置
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

CSS 3 Multiple Columns (Count) 使用方法:

示例:

任鸟飞网页设计博客,是一个专注于网页设计、网站建设、图形图像设计、搜索引擎、互联网趣味信息等的原创博客,作者任鸟飞。

为了能提供更多的高质量的原创技术类文章,任鸟飞网页设计博客于2010年7月份开通了任鸟飞网页设计博客联盟模块,此模块主要用于发表 任鸟飞网页设计博客联盟成员的博客文章。

如果你不经意间走到这里,那是我们的荣幸,但我们更期待你能在这里驻足,希望你能在安营扎寨。我们真诚的希望你能成为任鸟飞网页设计博客联盟的成员。如果你也乐意加入 任鸟飞网页设计博客联盟,请发邮件到 www.renniaofei.com@gmail.com 或 直接在下面留言。

CSS代码:

#CSS3_Multiple_Columns_count {
//Firefox 浏览器设置方法
-moz-column-count: 2;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-count: 2; // 分成的列数
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

怎么样?效果很酷吧,赶快试一下吧!

19 个评论

  1. joyla说道:

    这个不熟悉,我纯支持!呵呵

发表评论