Column 多栏排版必备

概述

要说多栏排版是报刊类的必用技巧，肯定是毋容置疑的。如下图这种排版在报刊类上那是司空见惯：

既然多栏排版这么好用，那不搬进 CSS 中，岂不可惜。这不 CSS 3 推出了一个 CSS Multi-column Layout 模块，就是用来解决多栏排版的。虽然目前还做不到如报刊类那么强大复杂，但是简单的分几个栏等还是没问题的。

虽然名字叫 CSS Multi-column Layout，但是实际上就是一个贴近报刊类的文字图片多栏设计的一个解决方案，而非一个真正强大的布局系统。所以要注意下使用场景。

基本概念

对于一个多栏布局来说，主要涉及到如何定义多少栏，栏宽为多少，分割的样式以及如何跨多栏等知识。相关的属性有：

• columns：下面两个的缩写。
  • column-width：栏宽。
  • column-count：多少栏。
• column-gap：栏之间的间距。
• column-rule：栏之间分割的样式，跟设置 border 差不多，下面三个的缩写。
  • column-rule-color
  • column-rule-style
  • column-rule-width
• column-fill：每栏内容的分配多寡。
• column-span：跨多少栏。

设置栏

有两个属性可以用来设置栏，分别为：column-count 和 column-width，其中 column-count 表示设置多少栏，而 column-width 表示设置每栏的宽度为多少。

下面以同一份 HTML 代码为例，分别设置两者来查看效果。

<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</div>

/* 设置栏个数 */
.column {
  column-count:3;
}
/* 设置每栏宽度 */
.column {
  column-width: 150px;
}

两者对应的效果图如下：

查看 demo

这两个值还可以使用简写成 columns, 其取值为 <'column-width'> || <'column-count'>，两个值不论前后，如果只设置一个值，另一个值默认为 auto。如果两者都设置，如下几种情况：

columns: 100px; /* 只设置栏宽 */
columns: 2; /* 只设置栏数 */
columns: 100px auto;
columns: 2 auto;

跨栏等

因为剩下的这几个属性都不是特别复杂，所以这里一次性使用一个综合实例来进行了解。

效果图大概如下：

查看 demo（改变视窗宽度会得到响应的栏变化）

注意里面有一张图片，需要设置 max-width: 100%，不然如果图片的宽度大于栏宽会溢出。

如果做一个简单的多栏图文排版，这些就已经够了。而对于一些更精细的控制，如控制文字换栏，设置打印分页等就需要大家自己进一步去挖掘了。（由于比较冷门，平时根本没有实战过，所以本人也缺乏相关的实践，就不继续误人子弟了，还请谅解。）

参考资料

• CSS Multi-column Layout