圖像滑塊的響應包裝div

Question

所以，我嘗試了一個使用HTML5，CSS3和jQuery的響應圖像滑塊。我創建了滑塊，但它沒有響應。可能是因爲滑塊的父包裝沒有響應。當我試圖讓父包裝div作爲響應時，滑塊內的所有圖像都會顯示出來，或者圖像變形（當高度被分配給父包裝div時）。我們無法刪除overflow:hidden表單父div，因爲它是唯一一個可以阻止所有圖像一次顯示的屬性。這裏是我的小提琴：Fiddle 這是我的HTML它

<div id="slider-wrapper"> 
    <div class="images"> 
     <img src="image1.jpg"> 
     <img src="image2.jpg"> 
     <img src="image3.jpg"> 
     <img src="image4.jpg"> 
    </div> 
</div> 

和CSS一樣

#slider-wrapper { 
    width: 80%; 
    height: auto; 
    overflow: hidden; 
    border: 1px solid black; 
} 

#slider-wrapper .images { 
    width: 100%; 
    height: auto; 
} 

#slider-wrapper .images img { 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
} 

我試過我的代碼削減到基層，這樣只有父DIV需要響應的內容與其中的圖像div一起提及。我想要實現的僅僅是將當前寬度和高度可見的第一個圖像視爲自動（以確保圖像響應）並將所有圖像隱藏起來。我做了jQuery來瀏覽圖片。謝謝:)歡呼聲！

Answer 1

我修改了您的代碼，以便在容器上使用display:inline-block和white-space:nowrap在旁邊顯示圖像。請致電this updated example。

#slider-wrapper{ 
    .... 
    white-space:nowrap; 
} 

#slider-wrapper .images img{ 
    .... 
    display:inline-block; 
} 

規則display:inline-block用來告訴瀏覽器：

「這些項目被treaten如塊元素（使他們能夠有高度和寬度，例如），但在此期間，必須考慮也作爲內聯的（因此它們不會堆疊在其他人之下，而是一個在另一個旁邊，因爲它們將是「單詞」）「。

爲了一個放在另一個旁邊，是必要的，容器應該足夠寬以容納這個長內容（否則元素會像長文本中的單詞一樣在下一行）。你有一個固定寬度的容器，所以你必須告訴瀏覽器：

「不要空格在同一行換行，忽略它們並把所有的元素」