html – Webkit CSS3列为其容器添加了一个额外的填充

前端之家收集整理的这篇文章主要介绍了html – Webkit CSS3列为其容器添加了一个额外的填充前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我为图像库创建了一个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>底部添加额外的空间。我不知道如何解决它。
搜索网络,发现这个thread,但我不知道是否是同一个问题。

检查此fiddle链接,并尝试使用Chrome和Firefox打开。

解决方法

尝试这个CSS
#featured 
{
    overflow:hidden;        
}
原文链接:https://www.f2er.com/html/232879.html

猜你在找的HTML相关文章