html - リストなしの水平スクロール可能な画像行

Question

(小さい) コンテナー div にサムネイルを含むスクロール可能な行を作成したいと考えています。

imgをリストにラップせずにこれは可能ですか? で試しました

float:left
display: inline-block;

画像用

および/または

overflow: auto;

コンテナ部門で。

ただし、div は列に表示され、水平スクロールバーは表示されません (overflow:auto を使用する場合は垂直のみ)。

jsfiddle: http://jsfiddle.net/8qJSr/1/

Answer 1

外側のラッパー内でスクロールされるラッパー内に画像を保持することで、これを非常に簡単に実現できます。

jsfiddle リンク:ここ;

HTML:

 <div id="wrapper">
   <div id="innerwrapper">
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
   </div>
 </div>​

CSS:

#wrapper { height: 100px; overflow: auto; width: 500px; overflow-y: hidden;}
img {height: 100px; width: 200px;float: left;}
#innerwrapper { width: 1200px;}​

Answer 2

float:left;正常に動作します。そのようなマークアップの場合

<div id="collection">
   <img ... />
   ...
</div>

CSS

#collection {
    height: 200px;
    overflow: auto;
}
#collection img { float:left }

Answer 3

長方形のdiv内に画像が含まれている場合は、上記のcssが機能するはずです。