17

我为图片库创建了一个 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 打开。

4

9 回答 9

9

试试这个 CSS

#featured 
{
    overflow:hidden;        
}
于 2013-10-13T18:25:03.987 回答
8

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

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

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

article {
     display: inline-block;
}

于 2015-02-18T20:50:37.443 回答
3

您在每篇文章中使用 margin-bottom 20px，并在 20px 中填充容器到，

看到这个小提琴

#featured {
   padding: 20px 20px 0 20px
 ...}
于 2014-03-25T21:12:26.663 回答
3

替代使用 { display: inline-block }

article {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

来自：类似问题，CSS Tricks

于 2016-12-09T01:51:47.237 回答
2

如果我正确理解了这个问题，请尝试...

#featured{
   padding: 20px 20px 0 20px;
   ...
}

和

#article{
   display: inline-block;
   ...
}
于 2014-04-15T12:21:50.203 回答
1

这只是空白！

section {font-size:0}
article {font-size: 1rem} /* if necessery */
于 2018-04-04T14:02:46.750 回答
0

不要与column-break-inside: avoid;任何属性一起使用，margin或者padding，我认为border这margin-bottom是解决此问题的最佳解决方案。http://jsfiddle.net/SdtP5/3

于 2013-11-17T15:44:48.740 回答
0

您这样做padding: 10px;还会在底部添加填充。使用它来删除底部的填充：

padding: 10px 10px 0px 10px;
于 2014-04-03T14:53:28.060 回答
-1

如果我对问题的理解正确，您可以尝试添加padding:0甚至padding:-10px;类似于容器的东西

于 2014-03-30T03:02:49.160 回答