html - コンテンツを下にシフトせずに水平スクロールDiv

Question

固定の高さと100％の幅のdivを作成する必要があります。divの内容は、一連の画像（imgタグのみ）です。

ウィンドウのサイズを画像の全幅よりも小さくすると、リストの最後の画像が最初の画像の下で左下にシフト/フローします。

画像が次の行にシフト/フローしないようにし、すべてを1行に保持して、ユーザーがdivを水平方向にスクロールして残りの画像を表示するようにするにはどうすればよいですか？

例としてjsfiddleを次に示します。http：//jsfiddle.net/ZnWXj/2/

score 3 · Accepted Answer

white-spaceCSS プロパティを使用しdivてnowrap値を指定します。

この jsFiddleに表示します。（あなたのオリジナルに加えて、overflow-yプロパティを追加しました。）

使用される CSS:

div {
    height: 120px;
    background: #666;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

score 0 · Accepted Answer

左のすべての画像をフロートしようとしていると思います。

cssでは、すべての画像にPostion Absoluteを使用してから、すべての画像を左にフロートします。

何かのようなもの

float:left;
position: absolute;

これらを img タグで使用します

これは私の頭のてっぺんから外れていますが、まだ試していません。私が間違っていたらごめんなさい。

2 に答える 2