文章标题 多列布局基础

来源:互联网 发布:淘宝一元秒杀怎么抢购 编辑:程序博客网 时间:2024/05/16 23:39

1.columns:column-width> | column-count>定义多列布局的宽度和列数。
提示:在实际布局中,所定义的多列的列数是最大列数。当外围宽度不够时,多列的列数会减少,而每列的宽度会自适应宽度,填满整个区域。
例:columns:200px 3;
如果只设置了宽度:column-width:200px;则当窗口大小改变时,列数会及时调整,列数不固定。
如果只设置了数目:column-count:3;则当窗口大小改变时,列宽会做出调整,列数固定不变。
2.column-gap:normal | length>定义列与列之间的距离。
3.column-rule:1px solid #666定义列的分割线。
4.column-span:1 |all 定义横跨所有列。

0 0
原创粉丝点击