0

こんな感じで画像のサムネを作りましたが、

<div id="image_thumb">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
    <img src="img4.jpg" />
    <img src="img5.jpg" />
</div>

スタイル

#image_thumb { width:100%; max-height:650px; overflow-x:scroll }
img { float:left; max-height:650px; }

画像を連続して左にフロートさせ、#image_thumb で下のスクロールを表示したい。ただし、ブラウザサイズで画像が浮きます。:(

何をしたらいいでしょう？

4

5 に答える 5

0

必要なのは、画像のフローティングを停止し、画像white-space:nowrap;の行がスペースで分割されないようにサムに追加し、word-spacing:-0.25em;画像間のスペースを非表示にすることだけです。CSS を次のようにします。

#image_thumb { 
    width:100%; 
    max-height:650px; 
    overflow-x:scroll; 

    white-space:nowrap;
    word-spacing:-0.25em;
}

http://jsfiddle.net/wB7q4/を参照してください

于 2013-07-06T10:04:10.057 に答える
0

を使用するfloatと、要素がコンテナからオーバーフローしません。

試す：

img { display:inline-block; max-height:650px; }

あるいは単に：

img { max-height:650px; }
于 2013-07-06T08:04:23.640 に答える