HTML使子div擴展到父div之外（寬度：9999px）

Question

我現在很難使用HTML / CSS。 我很想創建一種滑塊，將圖像與hidden overflow並排放置（因此，當您按“下一個”箭頭時，它將向左“移動”圖片（隱藏左側的圖片並顯示被隱藏的圖片） ）。

問題是我無法使div超出其父級，因此無法並排排列圖像。

看起來像這樣：

 <div id="slider"> <div id="images"> <div class="image_container"> <img src="" alt="1"/> </div> <div class="image_container"> <img src="" alt="2"/> </div> ... <div class="image_container"> <img src="" alt="3"/> </div> </div> </div> 

其中#slider的width應為95%的width ，最好是基於內容的高度，而#images寬度應為“ no width”-它應基於內容，並且max-height .image_container ， .image_container的width應為img的width -這些應該排成一排。

有什么想法可以實現嗎？ 我一直在嘗試很多事情，但沒有一個起作用。

Answer 1

將子元素的display屬性設置為inline-block ，將父元素white-space屬性設置為nowrap 。

 #parent{ background:#000; height:100px; padding:5px; white-space:nowrap; width:200px; } #parent>div{ display:inline-block; height:100%; width:100%; } #parent>div:nth-child(odd){background:#f00;} #parent>div:nth-child(even){background:#0f0;} 

 <div id="parent"><div></div><div></div><div></div><div></div><div></div></div>