Question

我有一个容纳图像滑块的容器，图像响应但是当我调整浏览器大小时，我的滑块和下一个div与类容器之间的差距很小那是为什么？

<!-- Image Slider  -->
<div class="container">
    <div id="slider">
        <div id="left-side-slider">
            <img src="img/test.jpg" alt="">
        </div>
        <div id="right-side-slider">
            <img src="img/precher.jpg" alt="">
            <img src="img/sermons.jpg" alt="">
        </div>
    </div>
</div>     

<!-- End of Image Slider  -->

<!-- Welcome Message   -->
<div class="container">
    <div id="welcome-message">
        <h1><span></span> WELCOME TO OUR CHURCH</h1>
        <article>
            Our Mission is to glorify God, proclaiming and following Christ, in the power of the Holy Spirit.
        </article>
    </div>
</div>

<!-- End of Welcome Message   -->

css部分是

.container{
    max-width: 960px;
    margin: 0 auto;
    padding: 0px 20px;
}


/*  Image Slider section */
#slider {
    margin-top: 10px;
    min-height: 350px;
}

#left-side-slider {
    width: 72%;
    float:left;
    margin-right: 2%;
}

#left-side-slider img , #right-side-slider img {
    width: 100%;
}

#right-side-slider {
    width: 25%;
    float: left;
}

 /* Welcome Message */
 #welcome-message {
    background-color: @bg-color;
    height: 200px;
    margin-top: 1%;
 }

  #welcome-message h1 {
    padding-left: 50px;
    padding-top: 30px;
    font-family: @Oswald;
    font-size: 35px;
    color: @white;
   }

   #welcome-message span {
    border-left: 1px solid @white;
    padding-right: 15px;
   }

   #welcome-message p {
    font-family: @OpenSans;
    font-size: 32px;
    color: @light-gray;
    padding-left: 50px;
   }

Answer 1

因为您使用min-height: 350px;作为

#slider {
    margin-top: 10px;
    min-height: 350px;
}

只需删除min-height

即可

使用JSFiddle：http://jsfiddle.net/tzfzjyp8/

当我调整浏览器大小时，css容器没有调整

1 个答案: