画像スライダーを保持するコンテナーがあり、画像は応答しますが、ブラウザーのサイズを変更すると、スライダーとクラスコンテナーの次の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]
コメントを追加