css3的多列布局(columns)
多列布局:可以实现web页面像报纸、杂志那样的布局
1. column-count:number;设置列数
2. column-gap:50px | 2em;设置列之间的间隙
3. column-rule:设置列之间的分隔线
复合属性:column-rule-width、column-rule-style、column-rule-color
注意:该线浮在column之上,比内容的层级高。
4. column-span:1 | all,作用在h标签上,设置标题占一列或者占整列
<style>
div{
width: 400px;
height: 600px;
border: 1px solid black;
column-count: 2;
column-gap: 50px;
column-rule: 4px solid red;
}
h2{
column-span: 1;
}
</style>
注意:column-count、column-gap、column-rule都是父级属性,即盒子的属性;而column-span是作用在h标签的属性。
列宽的计算:column-width:(width-(n-1)*font-size)/n;n是:列数
当n >= 2时,自己设置的column-width值 大于 公式值,那么列数减一
注意:column-count要比column-width精准