css3 -- 多列

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是强制中断发生在元素之前或之后

 

posted @ 2016-05-26 23:11  ^^-^^-  阅读(119)  评论(0编辑  收藏  举报