Question

我有两个div，第一个div包含滑块图像和测试，第二个div只包含文本。现在我想将第二个div放在第一个div之下。

我试过但第二个div放在第一个div的顶部。

这是我的代码，

<div class="slider">
    <div class="slider_below">
        <img src="assets/img/slider/slider1.jpg" alt="Slider 1" title="Slider 1" id="slider1" />
        <div class="text" id="text1" align="center">
            <h1>Clearence Sale</h1>
            <h1>Get upto 50% Off</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>

        <img src="assets/img/slider/slider2.jpg" alt="Slider 2" title="Slider 1" id="slider2" style="display:none" />
        <div class="text" id="text2" align="center" style="display:none">
            <h1>Clearence Sale</h1>
            <h1>Get upto 51% Off</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
    </div>
</div>
<div class="before_footer">
    fhfg
</div>

/* Slider */
.slider {
    width:100%;
    height:auto;
    overflow:hidden;
}
.slider .slider_below {
    list-style-type:none;
}
.slider .slider_below img {
    width:100%;
}
.slider .slider_below .text {
    width: 100%;
    left: 0;
    position:absolute;
    top: 50%;
    font-size:20px;
}

/* Before footer */
.before_footer {
    width:100%;
    height:auto;
    background:#fb725f;
    z-index:1;
    position:absolute;
}

当前结果，

必填结果

Answer 1

您提供的图片路径不正确。请提供正确的图像路径，以获得所需的输出

在这里，我尝试在我的本地提供所需的输出。

    <html>
    <head>
       <style type="text/css">
    /* Slider */
     .slider {
        width:100%;
        height:auto;
        overflow:hidden;
    }
    .slider .slider_below {
        list-style-type:none;
    }
    .slider .slider_below img {
        width:100%;
    }
    .slider .slider_below .text {
        width: 100%;
        left: 0;
        position:absolute;
        top: 20%;
        font-size:20px;
    }

    /* Before footer */
    .before_footer {
        width:100%;
        height:auto;
        background:#fb725f;
        z-index:1;
        position:absolute;
    }
   </style>
   </head>
   <body>
      <div class="slider">
        <div class="slider_below">
            <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/sea-gull-100219122.jpg" alt="Kartshopy Slider 1" title="kartshopy Slider 1" id="slider1" />
           <div class="text" id="text1" align="center">
              <h1>Clearence Sale</h1>
              <h1>Get upto 50% Off</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
       </div>
       <div class="before_footer">
           fhfg
      </div>
     </div>
   </body>
   </html>

将div放在另一个包含滑块的div下面

1 个答案: