jquery - 为什么包含 Snook 的简单 jQuery 幻灯片的 Bootstrap 行的高度为 0？

Question

我正在我的 Bootstrap 3 网站上实现 Snook 的简单 jQuery 幻灯片。

在这里查看:https://snook.ca/archives/javascript/more-simple-slideshow

出于某种原因，包含幻灯片的行的高度为 0，因此以下所有文本都出现在我的幻灯片图像的顶部。

这是我的代码:

<div class="row bottom-margin">
    <div class="slideshow">
        <img class="img-responsive" src="Splash1.jpg">
        <img class="img-responsive" src="Splash2.jpg">
    </div>
</div>

...

<script>
    $(function(){
        $('.slideshow > :gt(0)').hide();
        setInterval(function(){$('.slideshow > :first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');}, 5000);
    });
</script>

和CSS:

.slideshow {
    position: relative;
}

.slideshow > * {
    position: absolute;
    left: 0;
    top: 0;
}

我的故障排除表明，div 高度为 0 通常是由 float child 引起的，但我认为这不是我的问题。我可能是错的，我是新手。

感谢您的帮助!

Answer 1

你很接近。在这种情况下，它不是 float 而是 position: absolute 阻止将 child 的高度应用于 parent 。在这种情况下，我建议设置幻灯片本身的高度。