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

【问题标题】：Why do these CSS3 column-width elements add extra whitespace to their container?为什么这些 CSS3 列宽元素会在它们的容器中添加额外的空格？
【发布时间】：2012-07-07 00:00:22
【问题描述】：

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

【问题讨论】：

标签： css

【解决方案1】：

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

#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%;
}

【讨论】：

您的解决方案回答了我的问题，但不幸的是，它没有回答导致它的根本问题 ;-) 事实是我需要将多个独立列表链接在一起，但我认为这个问题需要一个额外的问题 :-) 无论如何感谢之前的回复！
@olistik，我相当有信心 exact 渲染归结为 Chrome 中的一个错误，但基本思想是 article 的宽度（这是 @ 987654325@)会和#container的宽度一样，最大宽度限制在4177px（为什么？我不知道）。因此，#container 超过 4177px 的任何宽度都会生成具有该宽度的文章。小于等于#container 的宽度。这就是为什么三个articles 没有占据#container 的整个宽度。
@olistik，哦，请在编辑之前阅读您的评论。当你问的时候给我打电话；我也许能帮上忙。