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應該在的width95%，優選高度基於內容， #images應該有「沒有寬度」 - 它應該基於內容和max-height〜，.image_container應具有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>