DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分！
当您想将列保持在特定宽度时，请使用 column-width。
section {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}浏览器将计算出在空间内可以容纳多少列，这些列的宽度至少为该宽度。 将 column-width 视为对浏览器的最小宽度建议。
column-width 是一个灵活的属性。 一旦浏览器无法以您指定的宽度容纳至少 2 列，列将停止并变为单列。
此属性还用于 columns 的简写形式，并且可以与 column-count 结合使用。 当同时声明这两个属性时，column-count 是最大列数。
值
您可以将 column-width 设置为 auto 或长度。
如果您也使用 column-count 或需要关闭该属性，请使用 auto。 可以将其视为告诉浏览器让 column-count 优先的方法。
要指定列的宽度，请使用大于（或等于）0 的长度。 您可以使用除百分比以外的任何 CSS 单位。
相关属性
其他资源
浏览器支持
多列布局支持
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 任何 | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
不要忘记您的前缀！
列宽 auto 在 WebKit 中不起作用。我在 FF 中没有测试。
刚看到关于在使用 auto 时指定列数的说明。
您好，
在您的 CodePen 示例 (http://codepen.io/katydecorah/pen/9b18945fdfdc4d508bbcc336b2034eed) 中，我们在调整大小时存在问题。
一些框的一部分出现在几列的顶部。
有原因吗？
多列布局支持
Chrome：没有!!!!
将 a.tag 元素的 display 设置为 inline-block 而不是 block。这解决了我在 Chrome 上的问题。
示例：http://codepen.io/mdgDesign/pen/qqLjbd
谢谢！
列的实现不正确。您只能选择最小列宽（而不是最大列宽）。用户必须手动从一列文本的底部滚动到下一列的开头，因此阅读长文本很困难。
我希望列能够智能地变化
如果文本很少，我希望只有一列（固定给定宽度，并且可以水平居中和垂直居中），直到达到视窗高度。在这一点上，只有一列，填充可用高度。然后我希望两列，第一列与视窗一样高，第二列随着第一列的增长而增长。
如果一列或多列超过视窗的整个宽度，我希望相同的列布局继续，但添加水平滚动条。
这种设计支持轻松阅读任何文本。