即使在缩放后仍保持网页上的图像布局？

Question

我目前在网页上一个接一个地水平放置三个图像。当用户充分放大时，页面布局会使第三个图像碰到低于前两个图像。我希望图像只是“消失”到页面的边缘，以便保持布局。如何指定此行为？谢谢。

Answer 1

将固定宽度设置为body或网站包装div。这样浏览器的大小应该对您网站的元素没有影响。

Answer 2

放入容器并防止包裹

<div style="white-space: nowrap;">
    <img ... />
    <img ... />
    <img ... />
</div>

使用CSS类而不是内联样式当然更明智。

如果您想保持容器不可滚动，可以将其overflow样式设置为hidden。

Here's a JSFiddle example在包含div元素的情况下设置两种样式，因此第三个元素（我使用的图像的插入span但不相关）只是在边缘消失。如果您尝试将span宽度设置为固定像素大小并缩放页面，您将看到元素刚刚消失在边缘上。

Answer 3

您可以放置​​overflow:hidden; ..这会在放大或缩小时隐藏第三张图片。 2，固定包装器的宽度和所有三个图像，并将浮动放在img div上。但与其他相比，保持第3个div宽度少一点。