在浏览器大小没有效率的情况下向左浮动

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

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

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

Answer 2

尝试一下，它应该会起作用：

<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 3

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

尝试：

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

或者只是：

img { max-height:650px; }

Answer 4

尝试

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

Answer 5

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