关于css3 分栏 column属性

本文深入探讨CSS3布局中column属性的使用方法,包括columns、column-width、column-count、column-gap、column-rule等参数的含义与应用,以及它们如何相互影响布局效果。同时提醒读者注意不同浏览器的兼容性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先关于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。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值