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

Posted 2023-02-16

【中文标题】Webkit CSS3 列为其容器添加了额外的填充。

【英文标题】：Webkit CSS3 column adds an extra padding to its container.

【发布时间】：2013-07-20 00:31:50

【问题描述】：

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

【问题讨论】：

我不知道解决方案，但是当您从 article 样式中删除 -webkit-column-break-inside: avoid; 时，大空间消失了。然而，这会在右栏的顶部留下看似空白但不存在的文章。

是的，这会破坏右上角的图片。我还在寻找纯css解决方案...

【参考方案1】：

试试这个 CSS

#featured 

    overflow:hidden;        

【讨论】：

对我来说这行得通.. 目前我最好的选择是容器得到一个不使用列的元素的近似高度。但也许有人可以更好地解释这种行为（或指出某处的解释）。

这是针对没有填充问题的人的解决方案。

这正是我所需要的。你让我头疼不已。谢谢

哇，比将我的块元素转换为内联块好多了。

【参考方案2】：

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

【参考方案3】：

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

看到这个fiddle

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

【讨论】：

解决这个问题的好方法，我认为这是问题的正确答案。

【参考方案4】：

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

【参考方案5】：

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

padding: 10px 10px 0px 10px;

【参考方案6】：

如果我对问题的理解正确，请尝试...

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

和

#article
   display: inline-block;
   ...

【讨论】：

padding: 20px 0 20px; 也足够了。

【参考方案7】：

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

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

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

article 
     display: inline-block;

【讨论】：

显示：内联块；帮助我避免新列顶部的额外边距。谢谢！

显示：内联块；使列最终可用。简直不敢相信这么简单，谢谢！

显示：内联块；也为我工作。谢谢！

【参考方案8】：

替代使用 display: inline-block

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

来源：Similar issue、CSS Tricks

【参考方案9】：

这只是空白！

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