css - 向左浮动，没有浏览器大小的效率

Question

我做了一个像这样的图像拇指，

<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 上显示底部滚动。但是，图像以浏览器大小浮动。:(

我该怎么办？

Answer 1

您需要做的就是停止浮动图像，添加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/

Answer 2

尝试

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

Answer 3

给出<div id="image_thumb">一个固定的宽度而不是100%. 例如：

#image_thumb { width:1000px; max-height:650px; overflow-x:scroll }

Answer 4

试一试，它应该可以工作：

<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:80%;
max-height:650px;
margin-left:10%;
margin-right:10%;
overflow-x:scroll
display:inline-block;
}
img {
float:left;
max-height:650px;
}

Answer 5

使用float时，元素不会溢出其容器。

尝试：

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

要不就：

img { max-height:650px; }