本文共 645 字，大约阅读时间需要 2 分钟。

column-span主要用来定义一个分列元素中的子元素能跨列多少列。前面大家都知道column-width，column-count等属性让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行任何分列，比如说分列元素中的标题不进行分列布局，需要横跨所有列，此时我们就需要用到column-span属性

语法：column-span: none || all

取值说明：

- 1. none:此值为默认值，表示不跨越任何列

- 2. all：这个值跟none刚好相反表示的是元素跨越所有列

html代码上这个例子和前面的稍微改变了一下，就是把内容分成了两个段落p，只不过为了节省空间，我用了（…）代替略去的内容；然后在内容中间多加入了一个标题h2，按照以前的分列布局，不用我说大家都知道会是什么样的效果，但今天我们需要让标题h2不是存在单独的列中，而是需要让整个h2跨列，那就需要今天的column-span，具体的请看下面的代码

效果图明显的告诉了大家，标题达到了我们需要的效果（Safari,Chrome,Opera）——整个标题跨了三列，除了这一点他还告诉我们一个信息。标题h2前面的段落p按列的布局进行了三列布局，然后运行到标题h2给断列了，而h2标题后面的段落P同样按照列的布局属性进行了分列布局。这样一来，如果大家需要在实际应用中将某个元素跨列，别的元素继续分列布局，那么就可以考虑使用今天介绍的column-span