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

Question

我目前在网页上一个接一个水平放置了三张图像。当用户放大到足够大时，页面布局会将第三张图片放在前两张图片的下方。我希望图像简单地“消失”到页面边缘，以便保持布局。如何指定此行为？谢谢你。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

放入容器并防止包装

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

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

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

这是一个 JSFiddle 示例，它在包含div元素上设置了两种样式，因此第三个元素（我使用过的图像的 insetadspan但这不相关）只是消失在边缘。如果您尝试将span宽度设置为固定像素大小并放大页面，您会看到元素刚刚消失在边缘。

score 0 · Accepted Answer

你可以放overflow:hidden;..这将在放大或缩小时隐藏第三张图像。第二固定包装器和所有三个图像的宽度并将浮动放在 img div 上。但与其他相比保持第三个 div 的宽度略小。