我有一个容纳图像滑块的容器，并且图像具有响应性，但是当我调整浏览器的大小时，我的滑块和带有类容器的下一个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;
}
因为你用min-height: 350px;的
#slider {
margin-top: 10px;
min-height: 350px;
}
只需删除 min-height
工作的JSFiddle：http：//jsfiddle.net/tzfzjyp8/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句