本文介绍了Webkit CSS3列为其容器增加了一个额外的填充。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我为图片库创建了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.

请检查此链接,然后尝试打开

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

推荐答案

试用此CSS

#featured 
{
    overflow:hidden;        
}

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

10-24 15:34