html - 如何使用 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%
}