如何使用 CSS 制作一组流过浏览器窗口边缘的图像

Question

我正在尝试编写一个基于Javascript的图像库。 现在我有代码集，以便我知道图像都将处于相同的高度，但是......

如何排列我的标记和 CSS，以便所有图像都只显示在一行上，当新图像超出浏览器窗口的宽度时，图像中"越界"的部分只是隐藏并且不会显示在下一行？

我一直在尝试以各种方式对图像本身及其容器进行div overflow、float和display，但无济于事。 我在这里一定忽略了一些简单的东西。

现在标记如下所示：

<div id="slider">
    <img src="img1.png" /> 
    <img src="img2.png" /> 
    <img src="img3.png" /> 
</div>

我应该如何设置样式，使其显示在一行上，即使图像的组合宽度大于浏览器窗口的宽度？

谢谢。

Answer 1

#slider {
    white-space: nowrap;
    overflow   : hidden;
    width      : 100%
}