html - 如何使用 CSS 制作一组在浏览器窗口边缘流动的图像？

Question

我正在尝试编写基于 Javascript 的图片库。现在我已经设置了代码，所以我知道图像都将处于相同的高度，但是......

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

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

现在标记看起来像：

<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%
}