CSS3 跨列设置column-span，十天精通CSS3教程-慕课网

CSS3 跨列设置column-span

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

column-span: none | all

取值说明

属性值	属性值说明
none	此值为column-span的默认值，表示不跨越任何列。
all	这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

例如：将第一个标题跨越所有列，代码：

column-span:all;

效果如下：

任务

在编辑器第33-37行输入正确代码，让所有偶数段落和标题，跨越所有列，注意浏览器的兼容性设置。补全代码后效果如下：

温馨提示：案例的效果如上图所示才算顺利通关，否则请再学习一遍本节的知识点！

?不会了怎么办

问答
评论
笔记
代码

全部精华我要发布

跨列只能要么不跨，要么全跨吗？

最新回答 / qq_慕标1063835

是的呢

1 回答 743 浏览

2019-08-26

浏览器兼容问题

最赞回答 / vcfriend

火狐浏览器是不支持-moz-column-span属性的.<...图片...>

5 回答 1141 浏览

2019-07-21

对h2,p:nth-child(2n)，设置column-span:all,h2为什么也要跨列

已采纳回答 / 慕粉181105819

p:nth，h2:nth 分别加就可以了

2 回答 1282 浏览

2017-10-09

对p:nth-child(2n)，设置column-span:all跨越所有列，结果是奇数行跨列，这是为什么？

已采纳回答 / 小黍

代码是没问题的，你要理解p:nth-child(2n)的意思，是p的父元素中为偶数的子元素，在这段代码中p元素父亲的第一个子元素是h2标签，第二个子元素是p标签，也就是p类标签的第一个，所以你会认为是奇数行跨列，你把选择器改成p:nth-of-type(2n)就会得到你想要的效果了

6 回答 2161 浏览

2018-08-19

求大神指路

最新回答 / rovast2

完全没听懂在问什么...

1 回答 760 浏览

2016-10-20

我说的对么？

最新回答 / 小隐山外人

纳尼？看不到题干

1 回答 607 浏览

2016-09-29

为什么把h2也放在这里才可以?

最赞回答 / 慕斯3035540

逗号之后空格或者回车表示并排关系即“两人”都应用下面的样式

4 回答 1111 浏览

2016-08-23

为什么火狐没有效果？

最新回答 / 小小ye

因为目前火狐浏览器还不支持此属性。

4 回答 1055 浏览

2016-08-23

p:nth-child(2n)的意思

已采纳回答 / 理想并非触不可及

p元素的父元素的第偶数个p元素，也就是p元素中的第偶数个

3 回答 4613 浏览

2016-10-20

column-span:all;怎么不管用呢

+ 我来回答回答最高可+2积分

3 回答 1090 浏览

2022-09-02

关于column-rule

已采纳回答 / lcysweet

column-rule主要是用来定义列与列之间……会出现的列与列之间，至于为什么，那是开发人员的事，就像abslolute为什么不占空间，z-index:为什么能控制层级，这都是开发人员开发的

2 回答 837 浏览

2022-05-24

为什么标题也跨列了呢？

已采纳回答 / Rhinel

h2,p:nth-child(2n){column-span:all;} 你看前面，h2","p ，看到他们之间有个逗号了么，就是指两个选择器共用后面的属性配置。这个两个选择器分别是h2和p:nth-child(2n)，后面的偶数列选择器只对p有效。意思是h2和第偶数个p元素。p:nth-child(2n){column-span:all;} 这个只选择了一个，意思是第偶数个p元素。

1 回答 961 浏览

2016-08-23

为什么设置了column-span:all不能夸列显示

最新回答 / 流沙009

chrome可以的

2 回答 1154 浏览

2016-08-23

火狐无力。。。chrome

最赞回答 / 大写的水

老师好多代码都强调了-webkit-moz-o-ms的兼容使用，但是实际却只在chrome下有效。。

4 回答 843 浏览

2022-05-19

p:nth-child(2n)应该是偶数的p段落跨列，为什么现在成了奇数的p段落跨列了？难道把h2标签也算成p了？

最赞回答 / qq_陈烁_0

<div class="columns"> <h2>我要分列显示</h2> <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布这个p的父元素是div而div的偶数个子元素就好理解了吧!

5 回答 1580 浏览

2022-04-02

全部我要发布

最热最新

只看我的

10-6 CSS3 跨列设置column-span