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通常是由漂浮的孩子造成的，但我不相信这是我的问题。我错了，我是新手。

感谢您的帮助！

Answer 1

你关闭了。在这种情况下，它不是浮动，而position: absolute会阻止孩子的身高被应用于父母。在这种情况下，我建议在幻灯片本身上设置一个高度。

Answer 2

正如您在演示页面中看到的那样，固定宽度（500px）和高度（332px）值被赋予包装div .fadein。

HTML

<div class="fadein">
    <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
    <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
    <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
</div>

CSS

.fadein {
    position: relative;
    height: 332px;
    width: 500px;
}

JS

$(function(){
        $('.fadein img:gt(0)').hide();
        setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

为什么包含Snook的Simple jQuery Slideshow的Bootstrap行的高度为0？

2 个答案: