CSS-问题-小缩略图变得巨大-并阻止了整个显示

如何解决CSS-问题-小缩略图变得巨大-并阻止了整个显示

我在这里设置了一个过渡域：http://melapacktest.ethermedia.hu/

这是在页面完全加载之前出现的问题：ISSUE

页面加载后页面的外观如下：ISSUE

我当时想这可能与图像的大小有关，但没有。 我尝试更改'display'属性，但这也没有帮助。我在想这可能是与JS相关的大小调整问题，但我真的不知道如何测试。这些积木由OWL-Carousel提供动力，但我尝试搜索此类问题并空手而归。

任何朝着正确方向前进的人都会受到赞赏！

解决方法

您要处理的内容类似于所谓的FOUC（无样式内容的闪烁）-尽管您的原因似乎与“猫头鹰轮播”有关，这需要花一些时间进行初始化，并且您的网站依赖在 that 上查看实际的最终外观。

在Owl Carousel加载之前，您没有任何CSS可以使布局 close 足够近。如果您将类似以下CSS的内容应用于CSS，它将使其非常接近（至少在台式机上，我没有检查移动设备之前/之后的实际外观，但是可以通过@media查询对此进行修改）

.scolumns {
    display: flex;
    overflow-x: hidden;
}

.scolumns > .column {
    width: 248px;
    flex-shrink: 0;
    padding: 10px;
}

基本上，如果您最终布局依赖于基于JavaScript的DOM操作，则您要么希望应用一些CSS来使其首先关闭（而且不会影响最终布局，因此Direct Child Combinator above: >-您的轮播会添加容器，因此加载完成后不会对其造成影响”）-或在完全加载后隐藏的父元素上使用某种加载动画。