第二十一天:多列布局

核心属性

column-count:规定列数
比如 column-count: 3; 就是把内容分成3列,简单好记,适合固定列数的场景(比如文章分栏)
column-width:规定每列的最小宽度
比如 column-width: 200px; 浏览器会根据容器宽度,自动计算能放几列,不够200px就不分列,很灵活
columns:简写属性(常用)
格式:columns: 列宽 列数; (顺序可换),比如 columns: 200px 3; 省得写两个属性

列间距与边框

column-gap:设置列与列之间的距离

默认是1em,可自定义(比如 20px),不用

 
 
© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    请登录后查看评论内容