为什么这些CSS3列宽元素在其容器中添加额外的空格？ [英] Why do these CSS3 column-width elements add extra whitespace to their container?

问题描述

我创建了此示例，演示了这种奇怪的行为。
我使用了webkit前缀的CSS规则版本，我已经测试他们只针对Chrome 19 for Mac。

I've created this example that demonstrates this weird behavior. I've used the webkit prefixed version of the CSS rules and I've tested them only against Chrome 19 for Mac.

推荐答案

列中的额外空间来自您指定的某些样式（例如 width：100000px; ）。要解决此问题，请使用以下CSS（示例）：

The extra space in the columns is from some of the styles you have specified (e.g. width:100000px;). To fix, use the following 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%;
}

这篇关于为什么这些CSS3列宽元素在其容器中添加额外的空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！