本篇文章中，小海前端（头条号）为小伙伴们介绍了CSS3技术新增的多列布局。相信许多做过网页布局的设计师都知道，在CSS技术中，要想让多个块级元素在一行内显示，呈现出多列的效果，需要使用浮动技术或者将它们设置为内联块。CSS3改变了这种复杂的操作模式，专门提供了多列布局。我们今天就一起来看一看多列布局是如何使用的。

承接文章：容器边框图片的细节要求，CSS3属性的使用细节，浏览器的兼容性设置

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

本篇文章涉及到的CSS3属性：

• columns

• column-width

• column-count

• column-gap

• column-rule

• column-span

• column-break-before

• column-break-after

一、对块级元素设置多列布局效果：

首先，小海前端（头条号）先带领大家一同看一下多列布局的效果是怎样的。下图为我们展示了一篇文章的多列布局效果。

多列布局的最终效果

上图中的效果是在文章的容器上施加的多列布局属性，CSS3采用columns属性来实现多列布局。

格式：columns:<column-width> <column-count>

从格式中可以看出，columns属性的取值是由两个派生属性组成的。

• column-width属性用于设置多列布局中单列的宽度。

• column-count属性用于设置多列布局中的列数。

CSS代码如下所示：

#box{

-webkit-columns:150px 4;

}

上述代码设置id属性取值为box的容器内容呈现为多列布局模式，每一列额宽度为150像素，共分为4列。当然在系统渲染这段代码时，会首先考虑满足每列150像素的要求。至于说是否可以分为4列，那就要看在单位宽度为150像素的前提下，文章内容是否能够被分为4列，或者4列能否能够将文章内容完全容纳。

二、调整多列布局中列之间的间距：

CSS3采用column-gap属性来设置多列布局中相邻列之间的距离。该属性的取值为但有单位的数值。

CSS代码如下所示：

#box{

-webkit-columns:150px 4;

-webkitcolumn-gap:100px;

}

上述代码表示列与列之间的距离为100像素。

三、为列之间设置分割线：

CSS3采用column-rule属性来设置列与列之间是否需要显示分割线。

该属性的取值格式如下：

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

可以看出，该属性的取值也是由多个派生属性组合而成的。

• column-rule-style属性用于设置分割线的样式。

• column-rule-width属性用于设置分割线的宽度。

• column-rule-color属性用于设置分割线的颜色。

CSS代码如下所示：

-webkit-column-rule:solid 1px orange;

四、在多列显示过程中实现跨列效果：

在多列显示的容器中，如果其中有一小段落或者一个小标题需要在一行内独自显示，而该内容后面的部分依然要保持多列显示，我们说这一小段落或小标题要实现跨列效果。

CSS3采用column-span属性来设置多列显示中的跨列效果。

该属性的取值如下：

• 1，表示内容在一列内显式，不发生跨列行为。

• all，表示内容在一行内显示，发生跨列行为。

请小伙伴们注意，该属性不能用于整个多列布局的容器中，需要使用在发生多列布局的容器中的任意元素上。

CSS代码如下所示：

#box p.alone{

column-span:all;

}

上述代码的含义是，在#box容器中，一个class属性取值为alone的<p></p>标记对发生了跨列行为。最终的效果如下图所示。

"星座的起源"发生了跨列效果

五、对象的段前断开和段后断开：

CSS允许多列布局内部的元素从自身的前后断开。那么什么是“断开”呢？

• “段前断开”就是将自身与其前一段断开，自身在新的一列中显示。

• “段后断开”就是将自身与其后一段断开，自身的后一段在新的一列中显示。

CSS使用column-break-before属性来设置段前是否断开。

CSS使用column-break-after属性来设置断后是否断开。

这两个属性的取值如下：

• always，实现断开模式。

• avoid，禁止断开模式。

这两个属性和column-span属性一样，都不能用于整个多列布局的容器中，需要使用在发生多列布局的容器中的任意元素上。

CSS代码如下所示：

-webkit-column-break-before:always;

采用了段前断开的效果如下图所示。

发生了段前断开效果

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

在接下来的文章中，小海前端（头条号）会为广大学习前端开发的小伙伴们讲解CSS3中提供的增强用户界面的属性。希望一直关注小海前端（头条号）的你千万不要错过。