Question

只要下载栏出现在底部，主页上的幻灯片内容就会跳起来。关闭下载栏后，它会恢复到正常位置。https://photos.app.goo.gl/F482eMfkXyfEZkdA9。

我想这与CSS有关。希望有人能帮忙。抱歉，以前是否有人提出过类似的要求，但是我看了一下却找不到任何东西，所以我在这个领域还很陌生。

这是CSS代码：

#slideshow > div {
    width: 970px;
    height: 500px;
    display: block;
    float: left;
    position: absolute;
    bottom: -5px;
    right: auto;
    background-repeat: no-repeat;
    margin-left: 20px;
    line-height: 180px;
}

JavaScript：

$("#slideshow > div:gt(0)").hide();
    setInterval(function() {
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 5000);

Answer 1

请使用bottom: -5px;对齐，而不是将元素与top对齐，以免发生这种情况。

 #slideshow > div 
    {
    width: 970px;
    height: 500px;
    display: block;
    float: left;
    position: absolute;
    top: 150px; /*  <-  change this   */ 
    right: auto;
    background-repeat: no-repeat;
    margin-left: 20px;
    line-height: 180px;
    }

当下载栏出现在底部时，页面上的幻灯片放映内容会跳起来

1 个答案: