这是一个简单的三列类的示例
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}您可以将其应用于如下文本块
<p class="three-col">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>示例
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
请注意，每列的高度根据规范自动平衡。
另请注意，此演示和示例代码使用 moz 和 webkit 供应商前缀，应该只在 Gecko（Firefox 1.5+ 等）和 Webkit（Safari 3+、Chrome 等）浏览器中有效。据我所知，Internet Explorer 或 Opera 还没有原生支持。
所有相关属性
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap : 20px;
-moz-column-rule-color: #ccc;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1px;
-webkit-column-rule-color: #ccc;
-webkit-column-rule-style: solid ;
-webkit-column-rule-width: 1px;
}您还可以设置column-width（带前缀），但通常让它自动计算更有意义。
规则（“rule”，如，线条）将把间隙分成两半。您可以使用与border相同的数值。
注意不要让您的文本块过高，以至于比（相当小的）浏览器窗口更高，否则与文本宽度超过浏览器窗口的问题相同（来回滚动阅读 = 糟糕）。还要考虑text-align: justify;
JavaScript 回退
在本文中介绍 A List Apart 文章。
一如既往地提出普通问题 :-)
IE 也兼容此 column-count 吗？
谢谢
嗨，我刚刚复习了这项技术，并在许多不同的浏览器中进行了测试。IE 9 及以下版本根本不支持此功能，因此您应该使用 jQuery 插件作为回退。
我在 IE 10 平台测试器中进行了测试，它确实有效，并且无需供应商前缀。我想迟到总比不到好。
我正在上网页设计课，其他人都正在使用简单的 2 列布局，而我却搞不懂。我已经了解了 html 部分，但我似乎无法弄清楚如何在我的网站/站点上显示列。这看起来很简单，但我就是不明白。到目前为止，我只做到了 1 列，这似乎是我能做的全部。我知道设计和列布局的其他所有内容（浮动、填充、宽度等），但我无法奠定基础。他的网站是 http://www.htmldog.com
他在文章中说..
“示例代码使用 moz 和 webkit 供应商前缀，应该只在 Gecko（Firefox 1.5+ 等）和 Webkit（Safari 3+、Chrome 等）浏览器中有效”
看起来 IE 目前不是兼容浏览器。
尽管如此，它可以很好地降级为单列——再一次，IE 用户以逻辑且正常的方式获取信息，只是视觉效果不那么令人愉悦！
它在 IE 中与 JS 回退一起使用。
ALA 文章来自 2005 年。我想知道在过去的六年里是否有人想出了任何新的回退脚本。主要是针对 IE，因为现在使用的其他 99.9997% 的 CSS 浏览器可能都支持多列布局模块。
是的，事实上，这在 IE9 中也不起作用，并且该文章中的脚本来自 2000 年代初。
谁在乎 IE6 :P
IE 的市场份额正在下降.. 带来 CSS2.1 + :)
好的，不错的文章
这似乎在最新版本的 Opera 中有效。使用 Opera 11.10 和 Dragonfly，我能够应用 css。这是一个截图http://dl.dropbox.com/u/886672/css-tricks/multiple-columns-works-in-opera.png">截图</a>
糟糕，我好像弄乱了，让我们试试这个：http://dl.dropbox.com/u/886672/css-tricks/multiple-columns-works-in-opera.png
-moz-column-count:2; /* Firefox /
-webkit-column-count:2; / Safari 和 Chrome */
column-count:2;
这仅适用于文本吗？或者可以与文本一起使用图像？新手，所以请原谅看似愚蠢的问题？
我写了一篇关于这方面的博文 :) 非常棒。希望它也支持 IE…
另一个 jquery 回退可以在此处找到：http://welcome.totheinter.net/columnizer-jquery-plugin/
我今晚才开始研究这个，所以还没有太多机会测试它……不知道它是否比 ALA 的东西更好
非常感谢 - 正是我需要的
是我还是文本模糊了，对于一个旨在教学的网站，也许您应该解决这个问题。
只需注意不要将列应用于多个段落，因为 Webkit 浏览器会将边距环绕到下一列，使其看起来很奇怪。这种行为几乎使它们对我来说不可用。
这是一个 2.25 年前的问题，如 此处所述，并且自那以后一直没有得到改进
http://welcome.totheinter.net/columnizer-jquery-plugin/
检查一下这可能会有所帮助，我一直在寻找同样的东西。
有用的提示，但“据我所知，Internet Explorer 或 Opera 还没有原生支持”令人难过。
它在“网页打印”中有效吗？我用相同的 css 属性检查了一下，但不起作用。如果有人知道打印选项，请告诉我。
它运行良好。
如果内容过大，会发生什么情况？如果内容过大，我需要找到列数。我实现了滑块，但它一直在滑动，必须在最后一个内容处停止。
这些属性在FF中都不起作用！！混蛋
它们确实如此。也许你复制粘贴的方式不对……翻白眼
刚刚写了关于这个主题的文章，并使用Codepen嵌入了一个可工作的示例，但需要修复宽度才能使笔工作。代码在WordPress中有效，但在Pen中无效。http://wpsites.net/web-design/style-content-columns/#Add_Simple_Hover_Effect
我该如何操作？
我今天尝试使用它，这里给出的示例不是一个好的示例。如果将columns-count应用于多个段落（这可能是最可能的情况），它将把段落分成列而不是整个区域。这变得很难阅读。因此，您应该做的是将其应用于整个div/section。
我不同意。这个例子非常好。它清晰、简洁，并且在作者提供的示例中效果很好。您只是有不同的需求，并且该类可以非常轻松地应用于您需要的任何元素（例如包含的div）。“您应该做的事情”是根据需要应用该课程。 :)
不错的文章。这正是我正在寻找的。不知何故，我想知道对于博客文章来说，在大型桌面屏幕上提高可读性是否有意义。
此页面建议使用列数并让浏览器计算列宽。
但经验表明，适应各种渲染设备和更好地适应内容恰恰相反！
您最好指定列宽，而不是完全不指定列数！
这样做的原因有很多
– 内容只能根据某些元素的某些最小宽度进行渲染。
– 当列不超过大约40em（36em 很好）时，文本列更容易阅读。
– 在这个36到40em的宽度内，仍然可以插入插图图像。
– 对于窄列表，项目通常很短，并且地名或人名的典型列表在所有情况下都非常适合18em以内。
– 然后，浏览器将计算渲染窗口中可以容纳的列数：当您尽可能使用屏幕的整个宽度时，体验最佳，因为它避免了滚动。
– 如果您指定列数，则在大屏幕上（尤其是在笔记本电脑和高清电视上）将浪费空间，因此他们需要向下滚动才能阅读内容，或者文本行对于轻松阅读来说太长，或者列太窄以至于无法很好地容纳内容，并且阅读也会很困难，或者插图图像将不再适合。
当浏览器使用此初始宽度计算列数时，右侧将保留未使用的空间，但浏览器随后会将该空间平均分配到这些列上。
– 如果只能容纳2列而不是第3列，则意味着最多会有半列添加到每列中，因此指定的18em的最小列宽将变为27em的有效列宽，这仍然可以合理地轻松阅读。
– 如果指定的宽度内只能容纳1列，则在唯一剩下的列中最多可能有36em：您达到了人脑和眼睛可以阅读文本的限制（36em大约为80个字符，即终端或打印文本上的典型列数，字体大小为13pt，标准A4或信纸纵向模式）。
– 现在，如果屏幕狭窄到以至于18em的单列无法完全容纳，浏览器将开始缩小它，但缩小永远不会达到零（否则终端甚至无法使用，即使是最小的终端，即纵向模式下的智能手机，也提供了一个显示区域，可以阅读大约40个字符，即大约18到20em。
因此，实际上我建议始终使用column-width: 36em 用于文本段落，并且column-width 对于地名、人名或电话号码的窄列表永远不要低于9em。如果您知道列表中元素的数据类型及其预期长度，则可以使用更窄的宽度（每个字符大约计算0.5em）。
完全放弃使用column-count的想法，这根本不好！
但不要忘记指定列间距：它应该大约为1em（仅当您决定使用column-rule时才使用0.5em到2em，并且仅使用1px column-rules，以colid或点状样式（避免虚线）。
总结
{ column-width: 18em; column-gap: 1em; } 无规则，或
{ column-width: 18em; column-gap: 0.5em; column-rule: 1px solid; }
忘记玩其他选项。
现在是时候考虑其他事情了！通过控制元素内部不希望出现的列中断来消磨时间：特别是，在多列布局的列之间拆分表格行通常是不希望的。使用“column-break-inside : avoid”为您的“tr”元素设置样式。如果可能，您还应该控制相同元素内的页面中断（理想情况下，我们应该能够避免表格列组内的水平列或页面中断，但不幸的是，CSS3模块仍然不支持此功能；这意味着您应该设计数据表以便它们整洁地适合36em的单列中。否则，将表格一个接一个地创建（并且不要在多列容器中使用它们）。
确保您所有页面在智能手机上的150%缩放级别下看起来都正常。查看它在宽笔记本电脑或非常大和高的高清电视上的行为，在距离约3米的地方观看。我的建议在所有设备上以及所有辅助设置（如缩放级别）下都能很好地工作。
首先尝试对您的内容使用我的建议：它应该在所有浏览器上、所有设备上都能正常工作，除非用户使用非常高的缩放级别（但这并非他们的正常阅读体验）。
您还会发现，对于打印文档，字体大小为9pt 小于屏幕上12pt的字体大小，18em也是一个绝佳的选择，因为它可以节省纸张！如果您以横向打印，这种节省更为重要：您可以容纳更多列，并且渲染后的列宽更接近理想的行大小！
脚注的小字（当您有很多脚注时）将适合更多列，这些列不会占用太多页面空间，并且用户可以在文档的主要部分阅读更多文本，而无需阅读脚注或翻页。
并且请通过提交您的错误来敦促浏览器编辑器更正CSS多列模块中的怪癖。如果浏览器无法使用我的建议正确渲染您的多列内容，请提交您的错误。
2014年4月2日检查此页面，使用Windows 7上的IE 11...没有列。
一切都很好，但是..它与Wookmark例如并不相同，因为如果您想按日期打印您的文章，此功能将无济于事——旧帖子将显示在页面的顶部。
确实如此。它确实是一个多列布局。只有当您不关心顺序时，它才能作为砌体布局工作。砌体布局先水平放置项目，然后向下移动并在可能的位置插入。列布局先将第一列一直填充到底部，然后流向下一列。如果您有随机图像，则它可以作为超简单的砌体布局工作。否则，您需要使用真正的砌体布局。
您好，这是一个简单而优雅的解决方案，但在窄屏幕上，列被严重挤压（在响应式设计中）。
是否有办法添加类似column-min-width=250px的内容，以便如果屏幕/容器小于此值，则内容将显示为一列（或第二列将移动到第一列下方）？
谢谢！
只需在您的小型屏幕媒体查询中将列数更改为一即可。
好帖子！
这是另一个使用Wookmark jQuery的多列设计布局示例。
http://webmuch.com/create-multi-column-design-layout-using-wookmark-jquery/
试试这个！
您好 - 列效果很好，但当我添加一个
<
h1> 标记如果将其居中或向右或向左排列，则标题下方的列顶部会有额外的空间，因此所有列都没有对齐。有没有解决方法？
谢谢
Melanie
您好，我在这里遇到了问题，抱歉愚蠢的事情，任何人都可以解决我的问题，将不胜感激
我如何用旧方法做到这一点？向左和向右浮动，以及用于设置“中间列”的边距。我的第二个疑问是：当文本从一列流到另一列时，使用这种老派技术，是否应该完全手动完成？
顺便说一句，感谢这篇有用的文章。来自巴西的亲切问候。