注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

css3——属性(四):多列(Multi-column)之一  

2014-09-11 13:22:29|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
CSS3的"Multi-column"按大块主要分成以下几块:

1、列数和列宽:column-count;column-width;columns
2、列的间距和分列样式:column-gap;column-rule-color;column-rule-style;column-rule-width;column-rule;
3、列的分栏符:break-before;break-after;break-inside;
4、跨越列:column-span;
5、填充列:column-fill。

一、column-count(列数):
语法:column-countauto | 整数; auto为默认值。
兼容性:
\

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

实例:

.box{width: 400px;
border: 1px solid #ccc;
padding: 10px;

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

效果:css3——属性(四):多列(Multi-column) - 珠玛雅 - 左岸

column-width(列宽度):
语法:column-widthauto | length; auto为默认值。
兼容性:
\

 实例:
.newspaper
{
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
column-width:100px;
}
效果:css3——属性(四):多列(Multi-column) - 珠玛雅 - 左岸

 columns
columns是把前面两个属性合并在一起使用。
语法:columnscolumn-width  |  column-count; auto为默认值。
兼容性:

\

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。


实例:

.newspaper

{

columns:100px 2;

-webkit-columns:100px 2; /* Safari and Chrome */

-moz-columns:100px 2; /* Firefox */

}





  评论这张
 
阅读(42)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017