使用“white-space：nowrap”會導致div幻燈片顯示問題

Question

我在一個部分內有一個自動JavaScript幻燈片。 幻燈片顯示使用div而不是圖像。 當div為空時，幻燈片放映工作正常，但是當我放入一個元素時，整個div被大量推入該部分。

我嘗試通過應用負margin-top值來移動單個元素，但它不起作用。 在弄亂代碼之后，我發現當我從部分的CSS中取出white-space: nowrap ，div不會被推下，但它不會再滑動了。

<section style="margin-top: 167px">
    <section id="home">
        <div id="home1">

        </div>
        <div id="home2">

        </div>
        <div id="home3">

        </div>
    </section>
</section>

section{
    width: 99.9%;
    height: 750px;
    margin-top: 150px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#home{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

#home1{
    background-image: url("../img/home1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}

#home2{
    margin-left: -4px;
    background-image: url("../img/home2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#home3{
    margin-left: -4px;
    background-image: url("../img/home3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#home div{
    display: inline-block;
    width: 100%;
    height: 100%;
}

$(document).ready(function(){
    const NUMBER_OF_SLIDES = 3;
    var slide_width = document.getElementById('home').scrollWidth / NUMBER_OF_SLIDES; 
    var slide_number = 1;

    setInterval(function(){
        if (slide_number < NUMBER_OF_SLIDES){
            $("#home").animate({
                scrollLeft: slide_width * slide_number
            },500);                 
            slide_number++; 
        }else{
            $("#home").animate({
                scrollLeft: 0
            },500);
            slide_number = 1;
        }
    }, 4500);   
});

我希望能夠將元素放在我的div中，而不會將div推下來，並且窗格可以播放幻燈片。

Answer 1

可能不是最好的解決方案，但是你可以做的就是將每個幻燈片的內容封裝在absolute定位的div 。 就像是：

<div id="home1">
    <div class="content">Slide 1</div>
</div>
<div id="home2">
    <div class="content">Slide 2</div>
</div>
...

CSS：

#home .content {
    position: absolute;
}