关于css3 分栏 column属性

首先关于column的使用要注意你使用的是哪种浏览器的问题。

1.columns

columns:100px 2;

你也可以这样定义:column-width:100px; column-count:2;

一看相信大家都明白是什么意思了。第一个代表栏的宽度,第二个代表栏的数目。这两个属性值回随着其他参数的改动而发生变化,并不是一层不变的。

还有哪些参数影响这两个值呢,下面会说到。


2.column-gap:10px;

这个表示两相邻栏之间的间距;


3.column-rule:5px double red;

表示间隔符的宽度,表现形式和颜色,也可以分开设置。

-column-rule-width:5px;

-column-rule-style:double;

-column-rule-color: red;


4.column-span:all;

这一个属性我只会all值。


5.上面说到width或count的值会根据gap的值变化,还要注意的是rule-width并不占屏幕的位置并不像border,但最好不要大于gap的值。


6.具体的其他属性和上面提到属性值的默认值请参看手册,如:http://www.phpstudy.net/css3/;http://www.w3.org/TR/css3-multicol/


本人只是刚刚学习了一点,把自己的理解表达出来,可能理解有出路,请见谅,我也是菜鸟。


对于引擎为不同的的浏览器,写法为-webkit-column和-moz-column。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值