为何给最后一列添加poster类后图片及动画消失？

问题原因 #

当给第6个<div class="col">添加poster类后，所有.poster元素都被设置为position: absolute——绝对定位的元素会脱离正常文档流，导致父容器.galeria失去内容支撑，高度直接塌陷为0，因此所有图片都无法在可视区域内显示。

而之前第6个元素未加poster类时，它作为Bootstrap默认的块级col元素，会正常撑开父容器的高度，使得前5个绝对定位的图片能在父容器的可视范围内显示并运行动画。

解决方案 #

给.galeria容器添加固定高度或自适应高度，确保父容器有足够空间容纳图片。最简单的方式是设置min-height（值根据你的图片实际高度调整）：

.galeria {
  position: relative;
  overflow: hidden;
  min-height: 400px; /* 替换为你的图片实际高度 */
}

另外，你的CSS中存在未使用的@keyframes moves，可以直接删除以优化代码。同时，所有.poster-x类的animation-duration都重复设置为6s，可统一放到.poster类中，简化代码。

修正后的完整代码 #

CSS

.galeria {
  position: relative;
  overflow: hidden;
  min-height: 400px; /* 按实际图片高度调整 */
}

.poster {
  position: absolute;
  animation: moveAcross 6s linear infinite;
}
.poster-1 {
  animation-delay: 0s;
}
.poster-2 {
  animation-delay: -1s;
}
.poster-3 {
  animation-delay: -2s;
}
.poster-4 {
  animation-delay: -3s;
}
.poster-5 {
  animation-delay: -4s;
}
.poster-6 {
  animation-delay: -5s;
}

@keyframes moveAcross {
  0% {
    left: -300px;
  }
  100% {
    left: 110%;
  }
}

HTML

<div class="row justify-content-center">
    <div class="galeria">
        <div class="col poster poster-1">
            <img src="images/posters/poster1.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-2">
            <img src="images/posters/poster2.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-3">
            <img src="images/posters/poster3.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-4">
            <img src="images/posters/poster4.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-5">
            <img src="images/posters/poster5.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-6">
            <img src="images/posters/poster6.jpg" class="img-fluid" />
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Nicoli