Webkit CSS3列为其容器增加了一个额外的填充。 [英] Webkit CSS3 column adds an extra padding to its container.

问题描述

我为图片库创建了一个CSS3多列布局，在Firefox上看起来不错。

I've created a CSS3 multi column layout for image gallery which looks nice on Firefox.

<section id="featured">
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>

css：

#featured {
    width: 730px;
    padding: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-fill: balance;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-fill: balance;
    column-count: 2;
    column-gap: 10px;
    column-fill: balance;
    background: #7d90a5;
}

article {
    width: 300px;
    display: block;
    background: #344252;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
    width: 335px;
    margin-bottom: 20px;
}

article img{
    width: 335px;
    display: block;
}

问题是，当我使用Chrome浏览器打开它时在< section> 的底部添加了额外的空间，我不知道如何解决它。
我在网上搜索，发现这线程，但我不知道如果它是同样的问题。

The problem is, when I am using Chrome browser to open it up, it adds extra space at the bottom of the <section> which I have no idea to fix it. I've search the web and found this thread but I am not sure if it's the same issue.

检查此小提示链接，并使用Chrome和Firefox尝试打开。

Check this fiddle link and try open using both Chrome and Firefox.

推荐答案

试用此CSS

#featured 
{
    overflow:hidden;        
}

这篇关于Webkit CSS3列为其容器增加了一个额外的填充。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！