css3 -- 多列

Posted 2020-07-13 zhanghuiyun

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