html – Webkit CSS3列为其容器添加了一个额外的填充
发布时间:2020-12-14 21:34:11 所属栏目:资源 来源:网络整理
导读:我为图像库创建了一个CSS3多列布局,在Firefox中看起来不错。 HTML: section id="featured"article img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" //articlearticle img src="http://sheepy.me/incoming/images/po
我为图像库创建了一个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>底部添加额外的空间。我不知道如何解决它。 检查此fiddle链接,并尝试使用Chrome和Firefox打开。 解决方法
尝试这个CSS
#featured { overflow:hidden; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |