Html 如何修复引导4张卡（CSS3多列错误）（Chrome IE）后的白色间隙？

我在Chrome和IE上有非常讨厌的bug（在FireFox上看起来不错）。我真的不确定是什么元素在这样做

关于bug：如果你向下滚动，你可以看到引导卡的末端，在它们和页脚之间有一个很大的白色间隙

错误所在的URL：我必须删除我的URL（Stackoverflow规则…对不起，伙计们）

我一直在使用Google Chrome Inspect试图找出问题所在，但我运气不好。这就是我在这里提问的原因，因为我知道问题在哪里

我唯一的线索是： -这个bug不在任何JS文件或任何外部css文件中，我认为我的css中有某种东西在做这件事。 -它不是类dtl24中的position:relative或overflow:hidden，因为我试图删除它们并在没有它们的情况下更新CSS，但bug仍然存在

还有，我想向你道歉。我试着用代码创建一个片段，但是没有图像，这个错误是不明显的

你知道错误在哪里吗？我怎样才能修复它

---

谢谢

正是因为这种款式，才有了这样的效果

column-gap: 1.25rem;

这是一个带有CSS3多列的示例，可能会导致底部出现间隙。此问题只有解决方法，具体取决于具体布局

你可以尝试使用

.card-columns .card {
    display: flex;
    page-break-inside: avoid;
    break-inside: avoid;
}

但是，对于Chrome/Webkit浏览器，您可能最终需要在容器底部使用较大的负边距：

.card-columns {
   -webkit-margin-after: -300px;
   overflow: hidden;
}

---

铬合金外观很好，没有缝隙。可能是缓存问题，请尝试清除缓存。我做到了。我也在不同的电脑上试用过，我可以看到。哦，天哪，但我需要它，以便在列之间留出空间。让我来玩吧。感谢您可以使用三个

div

，这三个div之间必须有间隙，例如应用

填充底部

和

填充右侧

。你不必申请整张卡。知道这一点很高兴。非常感谢。我会尽快试一试。我会让你知道它是否管用，管用。我不需要使用第二个代码。第一个已经足够了。非常感谢你。我对这个错误一无所知。奇怪的是，他们这么长时间都没有解决这个问题。你知道Webkit/Chrome上有关于这个问题的官方错误报告吗？