1

有什么方法可以让CSS 多列布局模块自动具有合适的宽度？

.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 手动解决，但如果可能的话，我想避免这种情况。

4

1 回答 1

0

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

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

于 2013-08-02T09:21:43.637 回答