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

Question

有什么方法可以使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 元素的宽度设置为视口(viewport)的宽度。

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

我错过了什么吗？

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

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

Answer 1

问题是您指定了 height: 100%，这意味着 div 元素将尝试填充 .collection 元素垂直第一。通过删除高度属性，列将沿宽度适当平衡:因此:http://jsfiddle.net/QeD77/

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