您的位置:首页 > 其它

多列布局

2016-01-28 14:45 169 查看
目前只有ie支持
http://samples.msdn.microsoft.com/iedevcenter/MultiColumn/default.html

column-count
分割的列数
默认auto,可由其他属性来计算

column-width
设置每一列的宽度
默认值为auto,由其他属性来决定,例如列数

column-gap
列间距
默认为1em

column-rule-color
分割线颜色

column-rule-style
分割线的样式

column-rule-width
指定列分割线的宽度

column-span
指定内容块跨越的列数

all
内容块跨越页面上的所有列。内容块前面声明的所有内容都显示在该内容块前面。
"1"
这是默认值。内容块不跨越多个列。



column-fill
指定在多列元素中内容流如何影响列长度


balance
所有列将被依次填充进来,并且使列的长度尽可能平衡,具体取决于其他列属性值。
auto
这是默认值。所有列将被依次填充进来,并且列的长度可能会不同,具体取决于其他列属性值。



break-after
指定该内容开始之前是否分列、分页


page
该列后面强制分页。
column
该列后面强制分列。
avoid-page
避免在生成框的后面强制分页。
avoid-column
避免在生成框的后面强制分列。



break-before
指定该内容结束后是否分列、分页


page
强制分页。
column
强制分列。
avoid-page
避免强制分页。
avoid-column
避免分列。



break-inside
指定内容是否允许被分列分页显示


avoid-page
避免在生成框的内部强制分页。
avoid-column
避免在生成框的内部强制分列。



缩写:

columns: 200px 4;
column-width 和 the column-count 的缩写

column-rule: 1px solid black
column-rule-width、column-rule-style 和 column-rule-color 缩写
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: