多列布局column-gap,column-rule,column-span

(一)

column-gap主要用来设置列与列之间的间距,其语法规则如下:

(二)列表边框column-rule

column-rule主要是用来定义列与列之间的边框宽度,边框样式和边框颜色。简单点说,就有点类似于常用的border属性。但column-rule不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置。

语法规则:

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

(三)跨列设置column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列,不管里面元素如何排放顺序,他们都是从左向右的放置内容,但有时我们需要基中一段内容或一个标题不进行分列,也就是横跨所有列,此时column-span就可以轻松实现,此属性的语法如下。

column-span:none | all

取值说明:

none:此值为column-span的默认值,表示不跨越任何列。

all:这个值跟none值正好相反,表示的是元素跨越所有列,并定位在列的Z轴之上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 浅谈CSS3多列布局 相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: 现在,强大的CSS3为我...
    haileym阅读 6,835评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,904评论 0 11
  • 他们太担心来世了,以至于都没学会怎样在这个世界上生活。 ——《杀死一只知更鸟》 CSS3新增了多列布局特性,它可以...
    BIGHAI阅读 3,229评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,974评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,302评论 19 139

友情链接更多精彩内容