Html 图像未按预期在父div中触发overflow-x滚动条

您好，我一直在尝试创建一个简单的图像库，但是当我的图像累积宽度达到大于其父级

div

的值时，让

overflow-x

滚动条出现问题

看看这个

我只想能够调整窗口的大小，并在有许多缩略图在其父级可用宽度内水平显示时显示

overflow-x

滚动条。

应该可以做到这一点。。。缩略图有一个固定宽度的容器，当包含的图像溢出到右侧时，该容器有一个水平滚动条

HTML （可选）JQuery 应该做到这一点。。。缩略图有一个固定宽度的容器，当包含的图像溢出到右侧时，该容器有一个水平滚动条

HTML （可选）JQuery

---

下面是另一个纯CSS解决方案：

我把图像放在另一个div中

<div style='height:100%; display: inline; white-space: nowrap;'>

检查

PS：我复制了几次图片，只是为了展示更多图片的外观。内联css可以移动到类或ID，但这取决于您

---

编辑：错误的链接。抱歉，我替换了它：）

这里是另一个纯CSS解决方案：

我把图像放在另一个div中

<div style='height:100%; display: inline; white-space: nowrap;'>

检查

PS：我复制了几次图片，只是为了展示更多图片的外观。内联css可以移动到类或ID，但这取决于您

---

编辑：错误的链接。抱歉，我替换了它：）

实现这一点最干净、最简单的方法是添加空白：nowrap；到容器div及其内的图像：

CSS

HTML

---

应根据需要动态调整，尽情享受

实现这一点最干净、最简单的方法是添加空白：nowrap；到容器div及其内的图像：

CSS

HTML

---

应根据需要动态调整，尽情享受

可以像这样使用$（'.thumbnails img'）。单击（function（）{（$（“.fullpic”）.attr（'src'，$（this.attr（'src'））；}）@佩德罗：是的，你可以。但我本来打算删除.fullpic类（因为它不是必需的），我明白你的建议，它确实会生成水平滚动条，但是，我确实需要拇指的容器来处理任意数量的图像，所以我不能用固定宽度来满足我的要求。@Jez这适用于任意数量的图像。如果需要，将

.gallery

类的宽度更改为

100%

，它仍然可以工作。请参见此处更新的fiddle:@gvee我不想在此处进行讨论，但这是一种变通方法，取决于缩略图div的宽度以适合一定数量的图像。所以谢谢，但最简洁的答案是修改我原来的提琴，在拇指所在的div中添加“white space:nowrap”，你根本不需要额外的div。可以这样使用$（'.thumbnails img'）。单击（function（）{$（“.fullpic”）.attr（'src'，$（this.attr（'src'）；}）@佩德罗：是的，你可以。但我本来打算删除.fullpic类（因为它不是必需的），我明白你的建议，它确实会生成水平滚动条，但是，我确实需要拇指的容器来处理任意数量的图像，所以我不能用固定宽度来满足我的要求。@Jez这适用于任意数量的图像。如果需要，将

.gallery

类的宽度更改为

100%

，它仍然可以工作。请参见此处更新的fiddle:@gvee我不想在此处进行讨论，但这是一种变通方法，取决于缩略图div的宽度以适合一定数量的图像。所以，谢谢，但最干净的答案是修改我原来的小提琴，在拇指所在的div中添加“空白：nowrap”，你根本不需要在其中添加额外的div。

$('.thumbnails img').click(function() {
    $(this).parent().parent().find('.selected').attr('src', $(this).attr('src'));
});

<div style='height:100%; display: inline; white-space: nowrap;'>

.container {
    height: 140px;
    width: 100%;
    border: solid 1px red;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

img {
    white-space: nowrap;
}

<div class="container">
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
</div>