我正在我的 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 引起的,但我认为这不是我的问题。我可能是错的,我是新手。
感谢您的帮助!
最佳答案
你很接近。在这种情况下,它不是 float 而是 position: absolute
阻止将 child 的高度应用于 parent 。在这种情况下,我建议设置幻灯片本身的高度。
关于jquery - 为什么包含 Snook 的简单 jQuery 幻灯片的 Bootstrap 行的高度为 0?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40119627/