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>