有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css3多列布局例子demo

代码编程 cat 11个月前 (11-01) 41次浏览 已收录 0个评论 扫描二维码

多列布局:

CSS3 支持在布局中建立列(column)的数量,以及内容如何在列之间流动(flflow)、列之间的间距

(gap)大小,以及列的分隔线(column rules)。

column-width属性:

作用:规定栏目的宽度。

取值

number 指定栏目宽度。

auto 自动,由其他属性决定,如 "column-count"。

column-count属性:

作用:指定栏目的个数

取值

auto 由其他属性决定列数,比如 "column-width"。

数字 表示栏目个数

column-gap 属性:

作用:规定栏目之间的间隔。

取值

normal 默认是 1em。

长度值(px,em)

指定的长度值

column-rule 属性:

作用:设置栏目边框宽度、样式和颜色规则。

column-rule-width边框宽度

column-rule-style 边框样式

solid dashed dotted double

column-rule-color边框颜色

注:column-rule为column-rule-width ,column-rule-style ,column-rule-color;的简写属性。

column-span:

设置栏目的跨栏合并

默认值1

all 所有

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址