CSS3 Multiple Columns 属性使用详解

作者:     目录:编程代码     发表: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; //分割样式
}

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

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

2 个评论

  1. joyla says:

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

joyla进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.