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

尝试

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

Answer 2

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

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

Answer 3

尝试一下，它应该有效：

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

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

尝试：

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

或者只是：

img { max-height:650px; }

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/

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

5 个答案: