響應式CSS將DIV與其他DIV高度對齊：auto

-1

我有一些圖像顯示在響應模式下的圖像滑塊。在下面我想製作一個導航欄。響應式CSS將DIV與其他DIV高度對齊：auto

< script type = "text/javascript" > $(document).ready(function() { 
    $("#slideshow img:gt(0)").hide(); 
    setInterval(function() { 
     $('#slideshow > img:first') 
      .fadeOut(2000) 
      .next() 
      .fadeIn(2000) 
      .end() 
      .appendTo('#slideshow'); 
    }, 4000); 
}); 
< /script> 
<body style="background-color: #F2F2F2;"> 
    <div style="background-color: black;">hallo</div> 
    <br/> 
    <div id="slideshow" style="margin: auto;width: 90%;" class="cf"> 
     <img class="logo" src="images/logo1.png" /> 
     <img class="logo" src="images/logo_2.png" /> 
     <img class="logo" src="images/logo_s2.png" /> 
    </div> 
    <br/> 
    <div id="menu" style="background-color: black;">hallo</div> 
</body>

CSS

.logo { 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    display: block; 
} 

#slideshow img { 
position: absolute; 
} 

#slideshow { 
position: relative; 
}

問題是，菜單股利並不想去幻燈片下面。它只是在幻燈片放映的一半。幻燈片中的圖像絕對定位。

我試着應用下面的clearfix，但它不起作用。

更多CSS

.logo:after { 
clear: both; 
} 

.cf:after { 
clear: both; 
}

我如何定位這個div，使其始終堅持在它下面。

ps我不是一個CSS嚮導，所以請在downvoting之前考慮這一點。在我發佈這個問題之前，我嘗試了3個小時。

來源

2014-03-01 Coen Damen

我使用下面的插件修復了它。

Response Slides

來源

2014-04-03 10:30:11

我不認爲你把所有的CSS規則放在你的文章中。最有可能的是，這些圖像是位置：絕對的，或者你正在浮動的東西，否則下一個圖像將出現，並「下推」當前圖像，這不會是好用戶體驗。我想建議使用clearfix。基本上你創建一個類，並創建一個已應用於它clear: both;一個僞元素：

.cf:after { 
    clear: both; 
}

並將其應用到這一行，像這樣：

<div id="slideshow" style="margin: auto;width: 90%;" class="cf">

而且，只是你可能已經知道的最佳實踐，但是：內聯樣式通常很難使用，並嘗試將腳本放在標記的底部附近。

來源

2014-03-01 13:20:58 danwarfel

謝謝，試過傷心但它不工作，看到我編輯的問題 –

響應式CSS將DIV與其他DIV高度對齊：auto

回答

相關問題