html - 溢出隐藏隐藏一个方向的完整图片，但不隐藏另一个

Question

这是我的代码（请参见此处的小提琴）：

img {
    width: 200px;
    height: 200px;
}

.image-container {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

我有很多图像，都是 200px 的平方，在一个image-container. 溢出的图像被隐藏。

当我将图像向左滑动时，最左侧的图像以平滑的方式消失。

当我将图像向右滑动时，最右侧的图像不会以平滑的方式消失。相反，它会在一瞬间消失。

为什么左右行为之间存在差异？我怎样才能在两边都有流畅的动画？

Answer 1

是因为您的图像容器不够宽，并且图像下降到下一行，但溢出隐藏了这一点。

请参阅此jsFiddle 示例。

使用您当前在图像容器上拥有的 CSS 将您的图像容器包装在一个包装器中，并使您的图像容器与所有图像的组合一样宽（在我的示例中为 4000 像素）。

.image-container {
    width: 4000px;
    height: 200px;
}
#wrapper {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

Answer 2

我建议white-space:nowrap

     img {
    width: 200px;
    height: 200px;
}
.image-container {
    white-space:nowrap;
    height: 200px;
}
#wrapper {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

在此处查看演示：http: //jsfiddle.net/pavloschris/bsjnq/3/