css - 为什么这些 CSS3 列宽元素会在它们的容器中添加额外的空格？

Question

我创建了这个示例来演示这种奇怪的行为。我使用了 CSS 规则的 webkit 前缀版本，并且仅针对 Mac 版 Chrome 19 对其进行了测试。

Answer 1

列中的额外空间来自您指定的一些样式（例如width:100000px;）。要修复，请使用以下 CSS（示例）：

#container {
 height: 250px;
 -webkit-columns: 15em;
 -moz-columns: 15em;
 -ms-columns: 15em;
 -o-columns: 15em;
 columns: 15em;
}
#container article {
 vertical-align: top;
 display: inline;
}
#container article img {
 display: block;
 margin: 0 auto;
 max-width: 100%;
 max-height: 100%;
}