css - 在没有包装 div 的情况下将图像 float 到溢出中

Question

我将一些图片放到了一个 div 中。

<div>
   <img />
   <img />
   <img />
   <img />
</div>

所有图像都设置为相同的高度 50px。宽度设置为自动。

问题是，我如何让图像向左浮动成一条水平线，该水平线到达父 div 的溢出区域。父 div 需要 100% 的宽度。

我想将 div 设置为 overflow-x: scroll。当图像只是 float: left 时，如果它们扩展 div 宽度，它们会分成另一行。但是我怎样才能让它们溢出，所以我必须滚动才能看到其他的？

主要问题是我不能使用 js 或包装器 div。这个问题必须用 css 来解决。

Answer 1

使用white-space: nowrap;在容器 div 上，display:inline 在 img 元素上。

FIDDLE

<div>
   <img src="http://placehold.it/350x50"/>
   <img src="http://placehold.it/350x50"/>
    <img src="http://placehold.it/350x50"/>
    <img src="http://placehold.it/350x50"/>
</div>

div
{
    white-space:nowrap;
    overflow-x: auto;    
}
img
{
    display: inline;
    margin-right: 10px;   
}