码迷,mamicode.com
首页 > Web开发 > 详细

css3 -- 多列

时间:2016-05-26 23:21:17      阅读:373      评论:0      收藏:0      [点我收藏+]

标签:

1、指定分列:

1 E{column-count:2;} --- 两列
1 E{
2    -moz-column-count:2;
3    -webkit-column-count:2;
4 }

Firefox与webkit实现

 

2、动态分列

1 E{column-width:100;}
2 p{
3    column-width:100px;
4    width:950px;
5 }

列的宽度其实不仅仅100,会根据950px进行一些调整

 

3、列间隔与分界线

1 间隔
2 E{column-gap:2em;}
3 规则
4 E{
5    column-rule-width:length;
6    column-rule-style:border-style;
7    column-rule-color:color;
8    column-rule:length border-style color;
9 }

 

4、处理跨越不只一列的元素

1 E{column-span:value;} 
2 value为1或all
1 E{break-after:keyword;}
2 E{break-before:keyword;}
3 E{break-inside:keyword;}
4 接受auto以及avoid值
5 break-after以及break-before接受column
6 avoid可以保证没有中断紧挨在指定元素之前或之后发生,column是强制中断发生在元素之前或之后

 

css3 -- 多列

标签:

原文地址:http://www.cnblogs.com/zhanghuiyun/p/5533071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!