现在的位置: 首页 > 综合 > 正文

css3学习 理论之多列布局

2013年06月27日 ⁄ 综合 ⁄ 共 795字 ⁄ 字号 评论关闭

例子:columns: 250px 3;250px表示的是列宽,3表示的是多列的数目。

也可以只指定列宽,column-width:300px;-moz-column-width:300px;-webkit-column-width:300px; 网页中每个栏目的最大宽度为300像素;根据窗口宽度自动调整几栏显示。

同样可以只指定列数,column-count:3;-moz-column-count:3;-webkit-column-count:3; 根据窗口宽度自动调整列宽。

 

column-gap,列间距,column-gap:3em;-moz-column-gap:3em;-webkit-column-gap:3em; 定义列间距为3em,默认为1em。

column-rule,列边框样式,例如:column-rule:dashed 2px gray;-moz-column-rule:dashed 2px gray;-webkit-column-rule:dashed 2px gray;定义列边框为2像素宽的灰色虚线。column-rule:solid 5px blue;-moz-column-rule:solid 5px blue;-webkit-column-rule:solid 5px blue;定义列边框为5像素宽的蓝色实线。

column-span,定义跨列显示,取值只能是1或者all,当是1 的时候,就意味着只在本栏显示,而取all的时候,将横跨所有列,并定位在列的Z轴之上。column-span:all;-moz-column-span:all;-webkit-column-span:all; 

column-fill,定义栏目高度是否统一,取值只能是auto或者balance,设置auto时,各列的高度随其内容的变化而自动变化。设置为balance时,高度统一。

学习学习。。O(∩_∩)O~

抱歉!评论已关闭.