使用自动固定宽度列时如何让 CSS 多列布局使用适当的宽度？答案

【问题标题】：How to get CSS multi-column layout to use the appropriate width when using auto fixed-width columns?使用自动固定宽度列时如何让 CSS 多列布局使用适当的宽度？
【发布时间】：2013-07-20 02:45:46
【问题描述】：

有什么方法可以让CSS Multi-column Layout Module 自动拥有合适的宽度？

.collection {
  height: 100%;
  -webkit-column-count: auto;
  -webkit-column-width: 100px;
  -webkit-column-gap: 0px;
}
.collection > div {
  display: inline-block;
  background-color: black;
  width: 100%;
  height: 100px;
}

http://jsfiddle.net/zBsBG/

当使用 12 个元素时，它现在自动将 .collection 元素的宽度设置为视口的宽度。

我希望它具有适当的宽度，具体取决于自动生成的列数。例如，当它是 3 列宽时，它应该是大约 300px 宽（不是视口的宽度）。

我错过了什么吗？

编辑：虽然我知道我可以为 .collection 元素指定宽度，但这违背了专门设置列宽并将计数设置为自动的目的。我希望它是可变宽度的。

这很容易使用 JavaScript 手动解决，但我想尽可能避免这种情况。

【问题讨论】：

标签： html css multiple-columns

【解决方案1】：

问题是你指定了height: 100%，这意味着divelements 将首先尝试垂直填充.collection 元素。通过删除 height 属性，列将沿宽度正确平衡：例如：http://jsfiddle.net/QeD77/

编辑：使用 JS 重新制作小提琴以平衡宽度： http://jsfiddle.net/tG4P6/4/

【讨论】：

容器元素的宽度仍然是你引用的小提琴中整个文档的宽度。
我已经更新了小提琴。不幸的是，我只能让它与 JS 一起使用，但它确实可以按照我的预期工作。
我没有看到你的小提琴有任何额外的修改。可悲的是，我认为 JS 方法将是必要的。我可能只是为了更好、更可靠的浏览器兼容性而使用 JS 完全重新创建多列的东西。干杯！
哦哦。一定是忘记保存了。好吧，我重新制作了 sn-p 并附上了新链接。