css - ラッパー div なしで画像をオーバーフローにフロートする

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:inlineimg 要素。

フィドル

<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;   
}