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打开。

Answer 1

试试这个CSS

#featured 
{
    overflow:hidden;        
}

Answer 2

快速修复，仅定位-webkit- browsers

＆＃13;

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

＆＃13;

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

＆＃13;

article {
     display: inline-block;
}

＆＃13;

Answer 3

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

请参阅此fiddle

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

Answer 4

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

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

和

#article{
   display: inline-block;
   ...
}

Answer 5

使用{display：inline-block}

的替代方法

library(dplyr)
DF1 %>%
     mutate(attr2 = as.integer(attr2 %in% DF2$Var1))

来自：Similar issue，CSS Tricks

Answer 6

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

Answer 7

如果我正确理解这个问题，您可以尝试添加padding:0甚至是padding:-10px;或类似的内容

Answer 8

你做了padding: 10px;，它还在底部添加了填充。用它来删除底部的填充：

padding: 10px 10px 0px 10px;

Answer 9

只是白色空间！

section {font-size:0}
article {font-size: 1rem} /* if necessery */

Webkit CSS3列为其容器添加了额外的填充。

HTML：

9 个答案: