Css 向左浮动，而不影响浏览器大小的效率

我做了一个这样的图像

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

我该怎么办？

试试看

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

给

一个固定宽度，而不是

100%

。例如：

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

---

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

<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;
}

#图像_thumb{
宽度：80%；
最大高度：650px；
左边距：10%；
保证金权利：10%；
溢出x：滚动
显示：内联块；
}
img{
浮动：左；
最大高度：650px；
}

使用

float

时，元素不会溢出其容器

尝试：

或者只是：

img { max-height:650px; }

---

您所需要做的就是停止浮动图像，在拇指上添加

空白：nowrap；

，这样图像行就不会在空格上被打断，并且

字间距：-0.25em；

隐藏图像之间的空格。将CSS保留为：

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

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

---

请参见

谢谢您的解决方案，但我希望获得div灵活宽度！

img { max-height:650px; }

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

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