我为图像库创建了一个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,但我不知道是否是同一个问题。
解决方法
尝试这个CSS
#featured { overflow:hidden; }