Webkit CSS3列为其容器添加了额外的填充.

Question

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

HTML:

<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>,我不知道要修复它.我在网上搜索并发现了这个帖子,但我不确定它是否是同一个问题.

检查此小提琴链接并尝试使用Chrome和Firefox打开.

Answer 1

试试这个CSS

#featured 
{
    overflow:hidden;        
}

Answer 2

快速修复,仅针对-webkit-浏览器

#featured {
    -webkit-margin-after: -110px;
}

此外,当使用列时,我发现将内部元素显示为内联块有助于防止它们分开(在您的情况下)

article {
     display: inline-block;
}