CSS3----多列

multi-column

columns:<'column-width'>宽度||<'column-count'>列数

-webkit-columns: 200px 3;
-moz-columns: 200px 3;
columns: 200px 3;

column-width:200px

column-count:3;

 

column-gap列于列之间的间隙length或者normal与字体大小相同

-webkit-column-gap: normal;
-moz-column-gap: normal;
column-gap: normal;

 

column-rule列于列之间的边框<'column-rule-width'>||<'column-rule-style'>||<'column-rule-color'>边框厚度，样式，颜色

column-rule-width:<length>自定义边框厚度

　　　　　　　　thin比默认边框厚度细的边框

　　　　　　　　medium 定义默认边框厚度

　　　　　　　　thick 定义比默认厚度粗的边框

 

columns-span是否横跨所有列

columns-span：none 不跨列| all横跨所有列

 

columns-fill所有列的高度是否统一   目前所有浏览器都不兼容

auto自适应内容

balance统一以最高的一列

 

column-break-before  ||  after  ||   inside(内部断行auto、avoid)是否断行

auto自动判断

always总是在元素之前断行并产生新列

avoid避免在元素之前断行并产生新列

 

转载于:https://www.cnblogs.com/jian1234/p/9871465.html