[英]How do I create a fixed amount of space between a responsive image and an element below?
我有一個響應滑塊,下面有元素。 我嘗試在下面的元素上使用margin-top,在圖像上使用margin-bottom。 在這兩種情況下,當視口減少時,圖像和其他元素分開公司......即間隙變寬。 我試過px,vw和vh作為保證金的單位。 有解決方法嗎? 代碼是:
<div id="slider">
<div class="container">
<div>
<img class="slider_img" src="images/hands-coffee-cup-apple_1920x965.jpg"/>
</div>
<div>
<img class="slider_img" src="images/macbook-apple-imac-computer-39284_1920x965.jpg"/>
</div>
<div>
<img class="slider_img" src="images/ipad-tablet-technology-touch_1920x965.jpg"/>
</div>
</div>
</div>
<div class="promises_hdr">Our promise to you</div>
<div class="promises">
<div class="promise">
<img class="promise_img" src="images/iconfinder_ecommerce.png"/>
<div class="promise_hdr">Get Noticed, Get Customers</div>
<div class="promise_txt">
<p>The progression from the Get Noticed Online step to the Create Customer step goes through 2 other stages. These are Convert and Close. Inward Marketing: webThemes understands.</p>
</div>
</div>
#slider{
width:100%;
height: 100vh;
position: relative;
}
.container {
max-width: 100%;
height: 100%;
margin: auto;
position: absolute;
}
.container div {
display: inline-block;
width: 100%;
height: 940px;
display: none;
}
.slider_img {
width: 100%;
height: auto;
z-index: -1;
}
.promises_hdr {
font-family: "Century Gothic", Sans-serif;
font-size: 2.3em;
color: #0150E2;
position: relative;
text-align: center;
margin-top: 4vw;
}
$( document ).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 4000);
});
嘗試使用%值作為保證金。 這是解決CSS中許多問題的最有信心的方法,特別是在調整網站的響應能力方面。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.