多年来，CSS浮动在创建网站布局方面一直是一个挑剔的，但必要的组件。 如果你的设计需要多列， 你转向漂浮 。 这种方法的问题在于，尽管网页设计师/开发人员在创建复杂的网站布局方面表现出了令人难以置信的独创性，但CSS浮动从未真正用于这种方式。
尽管浮动和CSS定位在未来很多年中一定会在网页设计中占有一席之地，但包括CSS Grid和Flexbox在内的更新布局技术现在正在为网页设计师提供创建网站布局的新方法。 另一种显示大量潜力的新布局技术是CSS多列。
CSS专栏已经出现几年了，但是在较老的浏览器（主要是旧版本的Internet Explorer）中缺乏支持，这使得许多网络专业人员在他们的制作工作中不能使用这些风格。
随着对IE旧版本的支持的结束，一些网页设计师现在正在尝试新的CSS布局选项，包括CSS Columns，并发现他们对这些新方法的控制要比对浮点数多得多。
CSS列的基础知识
顾名思义，CSS多列（也称为CSS3多列布局）允许您将内容分割为一定数量的列。 您将使用的最基本的CSS属性是：
- 列数
- 柱隙
对于列数，您可以指定所需的列数。 柱间隙将是这些柱之间的排水沟或间距。 浏览器将采用这些值并将内容均匀分割为您指定的列数。
在实践中，CSS多列的一个常见例子是将一段文本内容分割为多个列，与您在报纸文章中看到的类似。 假设你有以下的HTML标记（注意，举例来说，我只是把一个段落的开头，而实际上这个标记可能会有多段内容）：
您的文章标题
想象一下这里有很多段落的文字......
如果你写了这些CSS样式：
.content {-moz-column-count：3; -webkit-column-count：3; 列数：3; -moz-column-gap：30px; -webkit-column-gap：30px; column-gap：30px; }这个CSS规则会将“内容”划分成3个相等的列，它们之间的间距为30像素。 如果您需要两列而不是三列，则只需更改该值，浏览器将计算这些列的新宽度以均匀分割内容。 请注意，我们确实先使用供应商前缀的属性，然后是非前缀声明。
尽管这很简单，但以这种方式使用它对于网站使用来说是有问题的。 是的，您可以将一堆内容分成多列，但这可能不是Web的最佳阅读体验，尤其是当这些列的高度低于屏幕的“折叠”时。
然后读者必须上下滚动才能阅读完整内容。 尽管如此，CSS Columns的主体就像你在这里看到的那样简单，它可以用来做更多的事情，而不仅仅是分割一些段落的内容 - 它确实可以用于布局。
与CSS列的布局
假设你有一个内容区域有3列内容的网页。 这是一个非常典型的网站布局，为了实现这3列，您通常会将所在的分部浮起来。使用CSS多列，这非常容易。
以下是一些示例HTML：
最新消息
内容会放在这里...
来自我们的博客
内容会在这里...
即将举行的活动
p>
使这些多列的CSS从您之前看到的内容开始：
.content {-moz-column-count：3; -webkit-column-count：3; 列数：3; -moz-column-gap：30px; -webkit-column-gap：30px; column-gap：30px; }现在，这里面临的挑战是，由于浏览器想要均匀分割这些内容，因此如果这些分割的内容长度不同，那么浏览器实际上将分割各个分割的内容，将其开始添加到一列，并且然后继续阅读另一篇文章（您可以通过使用此代码运行实验并在每个部门内添加不同长度的内容来查看此内容）！
这不是你想要的。 你希望每个部门创建一个独特的专栏，无论单个部门的内容多大或多小，你都不希望它分裂。 您可以通过添加这一行额外的CSS来实现这一点：
.content div {display：inline-block; }这将迫使那些位于“内容”内部的分部保持完整，即使浏览器将其分成多列。 更妙的是，由于我们在这里没有给出任何固定宽度的内容，所以这些列会随着浏览器调整大小而自动调整大小，使它们成为响应式网站的理想应用程序。 采用这种“内联块”风格，您的3个部门中的每一个都将成为一个独特的内容列。
使用列宽
除了“column-count”之外，还有一个属性可以使用，根据您的布局需求，它可能实际上是您网站的更好选择。 这是“列宽”。 使用前面所示的相同的HTML标记，我们可以用CSS来做到这一点：
.content {-moz-column-width：500px; -webkit-column-width：500px; column-width：500px; -moz-column-gap：30px; -webkit-column-gap：30px; column-gap：30px; } .content div {display：inline-block; }这样做的方式是浏览器使用该“列宽”作为该列的最大值。 因此，如果浏览器窗口的宽度小于500像素，则这3个分区将出现在一列中，即另一列的顶部。 这是用于移动/小屏幕布局的典型布局。
随着浏览器宽度增大到足以容纳2列以及指定的列间距，浏览器将自动从单列布局移动到两列。 继续增加屏幕宽度，最终，您将获得3列设计，我们的3个分部中的每一个都显示在自己的列中。 同样，这是获得响应式多设备友好布局的好方法，您甚至不需要使用媒体查询来更改布局样式！
其他列属性
除了此处介绍的属性之外，还有“列规则”属性，包括允许您在列之间创建规则的颜色，样式和宽度值。 如果您想要将行分隔开，则可以使用这些代替边框。
实验时间
目前，CSS多列布局得到很好的支持。 使用前缀时，超过94％的网络用户将能够看到这些样式，而那些不受支持的组织实际上只是Internet Explorer的旧版本，您可能不再支持这些旧版本。
现在有了这样的支持，没有理由不开始尝试使用CSS列，并在生产就绪的网站中部署这些样式。 您可以使用本文中提供的HTML和CSS开始您的实验，并使用不同的值来查看哪些最适合您网站的布局需求。