报纸和杂志的一个熟悉的技巧是将较长的文本区域分成两列或更多列。 这样做的原因是，如果文字在某一区域内很长，有时会导致人们失去对下一行的追踪。 有了CSS多列布局模块，网络专业人员现在也可以只用一点CSS样式就能将一列布局应用到一个文本区域。 CSS中的多列布局也是自动响应的，所以往往你可以在笔记本电脑或平板电脑上形成两列或三列，而移动设备可能只有一列。
为文章添加列的效果
让我们先看看我们要使用的标记，以便开始使用。 它由一个标签和一些包含在
中的和元素组成。html
<html>
<head>
<title>CSS Multi-column Layout Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<article>
<h2>Operating Systems</h2>
<p>Operating systems come in all shapes and sizes. Most of the operating systems in the world are Windows and
Linux. Windows is a Microsoft production while Linux is open source with companies like Ubuntu, Red Hat,
and others supporting it.
</p>
<p>Better to use some text about operating systems in this section here before moving on to
application software in the next section. Many web servers run on Ubuntu while office workers often make
use of Windows operation systems.
</p>
<h2>Application Software</h2>
<p>Application software is another type of software and it runs on top of the operating system. Microsoft
Office is probably the most used application software in the business world. Adobe are the makers of
application software for creative types.
</p>
<p>Those applications for creativity include things like Adobe Photoshop, Illustrator,
Dreamweaver, and many others. Still other application software may be software such as customer
relationship management software that companies may use to track the day to day business.
</p>
</article>
</body>
</html>
这是我们文章的布局，在应用任何列效果之前。
现在有几种方法可以在你的布局中打开多列。 首先，你要锁定你想分成几列的元素，然后应用以下属性 **column-width**或 column-count. 该 **column-width**属性可以简单地创建尽可能多的列，以适应现有的空间。 **column-count**另一方面则是简单地创建你指定的列数。
列宽
- 值： 宽度
- 默认值： 自动
- 适用于：块级元素、表格单元和inline-block元素。
列数
- 值： 整数
- 默认值： 自动
- 适用于：块级元素、表格单元和inline-block元素
现在，让我们把这篇文章变成一个三栏布局，并利用列数属性来实现。 这个属性总是接受一个正数的整数，而且不能是小数。 因此，例如，1、2、3，等等......浏览器将动态调整每一列的宽度，以适应设备允许的宽度。
css
article {
column-count: 3;
}
让我们也为<文章>标签添加最浅的蓝色背景，这样我们就可以看到它在屏幕上所占的确切面积。
css
article {
column-count: 3;
background-color: #e7f5fe;
}
我们打开列的另一个选择是那个列宽的方法。 我们可以先尝试一个值，比如说150px，浏览器会在
元素中创建尽可能多的列。 如果有多余的空间，列的宽度就会动态地扩大，以适应可用的空间。css
article {
column-width: 150px;
background-color: #e7f5fe;
}
如果我们缩小视口，现在的布局只有两列，因为这是最适合的。 这是CSS多列布局模块的一个不错的内置响应功能。
栏隙 **columns**属性作为速记工具
你也可以使用columns属性在元素上指定列。 columns属性的好处是，你可以指定一个计数，如1或2，也可以指定一个宽度，如300px。 两者都可以。 此外，你可以同时指定计数和宽度。 例如，列。3 200px;。 用这种方法，所有的列都是200px宽，但如果视口的宽度变得非常宽，允许有5或6个列，那么指定3个列的事实就设定了一个最大的列数。
article {
columns: 3 200px;
background-color: #e7f5fe;
}
当使用columns时，一个非常宽的视口仍然只显示三列*。3 200px;*。
注意，如果我们现在省略3的计数，使用*columns:200px;*作为规则，我们现在可以有尽可能多的200px宽的列。
CSS列是如何工作的
CSS中的多列布局现在有一个新的容器，它存在于内容框和内容之间，被称为列框。 这些框是以从左到右的方式排列的，包含元素中的所有列框都有相同的宽度和高度。 高度是动态调整的，允许文本在所有列中均匀分布。 在大多数情况下，列框与块级元素类似。 然而，列框的一些不同之处在于，它们不像标准的块级元素那样有任何填充、边框或空白。 此外，每个列框不能有自己的背景颜色。 在多列布局中，填充和边距适用于包含元素框，而不是其列。
控制列之间的空间
你可以通过使用属性来控制列之间的间隙大小。 **column-gap**属性来控制列之间的间隙大小。 如果你想在列之间创建一条可见的线，该 **column-rule**属性可以帮助你。 在这里，我们将column-gap设置为4em。
article {
columns: 3;
background-color: #e7f5fe;
column-gap: 4em;
}
现在让我们使用column-rule属性在列之间添加一条垂直线，像这样。
article {
columns: 3;
background-color: #e7f5fe;
column-gap: 4em;
column-rule: 2px solid lightslategray;
}
注意：column-rule属性是column-rule-style、column-rule-color和column-rule-width的简写。所有这些属性的作用就像border-*属性一样，所以如果你知道如何在CSS中使用边框，你可以将同样的技术应用于列规则。
多列CSS布局中的图像
你也可以在你的多列css布局中添加图片。 一个好主意是将每张图片的宽度设置为100%，它们会自动调整大小，以便从边缘到边缘填满该列。 我们将在操作系统标题和应用软件标题下添加一个图像。
html
<article>
<h2>Operating Systems</h2>
<img width="100%" src="operating-system.jpeg">
<p>Operating systems come...</p>
<p>Better to use some text...</p>
<h2>Application Software</h2>
<img width="100%" src="application-software.jpeg">
<p>Application software is...</p>
<p>Those applications for...</p>
</article>
改为两栏式布局后，图像仍然看起来很好，并填满了每一栏的宽度。
article {
columns: 2;
background-color: #e7f5fe;
column-rule: 2px solid lightslategray;
}
修复第一栏的边距
你可能已经注意到，在到目前为止的所有例子中，第一栏在内容开始之前总是有一点空白区域。其余所有的列最终都有直达列顶的内容。 为了解决这个问题，我们可以简单地将*margin-top 0;*应用于列容器内的所有元素。 在我们的例子中，那就是。
article > * {
margin-top: 0;
}
现在，内容在所有的列中都能更好地排成一排了。
提示：不要明确地在包含列元素上设置高度。 这可能会限制在所有列上分配内容的可用空间。 如果没有足够的空间，浏览器会在列的容器外创建溢出的列。 这很可能也会导致滚动条的出现，而且一般来说，效果并不理想。 下面是这种情况的样子。
列填充属性
如果因为某种原因需要在列框上设置高度，你会想知道列填充属性。 浏览器会尝试通过调整列容器的高度来自动为你平衡列之间的内容。 到目前为止，所有的例子都证明了这一点。 然而，如果你确实设置了这个高度，可能有时会出现内容不足以填满所有列的情况。 在这种情况下，你可以用column-fill来控制内容如何在各列之间平衡。 有三种可能性：自动、平衡或全部平衡。 默认是平衡。
考虑到我们现在在容器上有一个650px的高度，并且列填充被设置为平衡。
article {
height: 650px;
columns: 3;
background-color: #e7f5fe;
column-rule: 2px solid lightslategray;
column-fill: balance;
}
所发生的是容器的全部高度被呈现出来，你可以通过浅蓝色的背景看到。 然而，内容在所有三列中保持平衡，在每一列的下半部分留下了空隙。 另一个选项是将 column-fill 设为自动。 这样做的效果是在移动到下一列之前，从上到下完全填充每一列。 现在，所有的三栏都呈现出来了，但是只有足够的内容来填充前两栏。
article {
height: 650px;
columns: 3;
background-color: #e7f5fe;
column-rule: 2px solid lightslategray;
column-fill: auto;
}
如何跨栏
利用column-span属性，你可以在列容器内的元素中创建一些非常酷的效果。 基本上，你可以对一个元素应用类似column-span: all;的东西，它将脱离列框，一路跨越所有列。 这样做的效果是创建一个水平分隔线，上面的列是相关的，下面的列是相关的。 在标记中，我们添加了一个新的段落，强调如下：
<article>
<h2>Operating Systems</h2>
<img width="100%" src="operating-system.jpeg">
<p>Operating systems come in...</p>
<p>Better to use some text about operating...</p>
<p class="spancolumns">Middleware Is In The Middle!</p>
<h2>Application Software</h2>
<img width="100%" src="application-software.jpeg">
<p>Application software is another type...</p>
<p>Those applications for creativity...</p>
</article>
这里是.spancolumns类的css。 它的大部分是用于造型的，但要注意列-跨属性。
p.spancolumns {
column-span: all;
font-weight: bold;
font-size: 1.2em;
background-color: lightskyblue;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: .5em;
margin: .5em;
text-align: center;
}
使用CSS的多列布局总结
在本教程中，我们学习了所有关于只使用CSS的多列布局。 CSS多列布局模块是使这种布局成为可能的原因。 下面的属性是我们用来演示上述代码示例的一些属性。
- column-count 设置一个元素应该被分成的列数
- columns 如果你喜欢，可以用它来代替column-count
- column-fill 如果一个高度被设置为一个多列元素。这将控制内容如何填充各列
- column-gap 设置列之间的间隙宽度
- column-rule 列规则样式、列规则宽度和列规则颜色的速记。 设置列之间的规则样式。
- column-span 你可以用这个让一个元素跨越所有的列
- column-width 如果你喜欢，你可以设置精确的列宽
