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; //分割样式
}
怎么样?效果很酷吧,赶快试一下吧!
主题很大方
这个不熟悉,我纯支持!呵呵