前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3中的columns属性的用法

CSS3中的columns属性的用法

作者头像
OECOM
发布2020-07-01 17:49:25
9630
发布2020-07-01 17:49:25
举报
文章被收录于专栏:OECOM

表格布局中可以将元素放进设置好的单元格里,将网页进行分列分行的布局,但是表格布局有很大的局限性,现在基本上不再使用表格布局,只是在有表格的时候使用表格来进行局部布局。与此同时在css3中出现了多列布局的方式,来替代表格的多列布局方式。

css3中用于多列布局的是columns属性,下面来看一下用法

代码语言:javascript
复制
div
{
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
}

由于各个浏览器厂商没有统一,所以需要加上浏览器的前缀。上面代码的意思是说将这个div分为3列,每个最小的宽度为100px,如果浏览器的宽度不足以装下3个,那么第三个将被挤到下面,形成两行两列,并且下面一行为一列。如果columns的第一个值为auto则三列的宽度为自动,并且保证始终未3列。如果想设置每列之间的宽度,可以用column-gap的方法(其他浏览器需要加相应前缀)。同样,他也可以设置中间的分割线,方法是column-rule,这个方法和设置边框的方法是一样的 例如colunm-rule:1px dashed red;

下面在来说一下他的兼容性。

QQ图片20151009103303
QQ图片20151009103303
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-10-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档