html - 没有内容向下移动的水平滚动 Div

Question

我需要创建一个固定高度和 100% 宽度的 div。div 的内容是一系列图像（只是img标签）。

当我将窗口的大小调整为小于图像的整体宽度时，列表中的最后一个图像会向下移动/向左流动，位于第一张图像的下方。

如何防止图像移动/流动到下一行并将它们全部放在一行上，以便用户被迫水平滚动 div 以查看其余图像？

这里以 jsfiddle 为例：http: //jsfiddle.net/ZnWXj/2/

score 3 · Accepted Answer

您需要使用white-spaceCSS 属性div并为其nowrap赋值。

显示在这个 jsFiddle中。（您的原件，加上我添加的overflow-y属性。）

使用的 CSS：

div {
    height: 120px;
    background: #666;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

score 0 · Accepted Answer

我认为您正在尝试浮动左侧的所有图像。

在 css 中，对所有图像使用绝对位置，然后将所有图像浮动到左侧。

就像是

float:left;
position: absolute;

在 img 标签上使用这些

这是我的头顶还没有尝试过。很抱歉，如果我错了。

2 回答 2