HTML 图片水平行答案

【问题标题】：HTML Pictures Horizontial RowHTML 图片水平行
【发布时间】：2010-01-31 11:07:14
【问题描述】：

我想知道是否有一种方法可以使包含图像的 div 具有水平滚动的溢出，如下面的投影图所示：

alt text http://www.zip-cover.com/development/image_carosoul/slideshow.jpg

一如既往，非常感谢任何帮助

【问题讨论】：

【解决方案1】：

这样的事情应该可以工作：

#imageContainer { 
  height: 200px;
  overflow: auto; 
  white-space: nowrap; 
}

确保图像不高于高度参数。

【讨论】：

你的代码是什么样的？ <div id="#imageContainer"><img src="x.jpg"><img src="y.jpg"><img src="z.jpg"></div>?

【解决方案2】：

你需要知道 div 中图片的宽度和数量以防止它被换行：

<div id="outer">
    <div id="inner" style="width: 3200px;">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
    </div>
</div>

在 CSS 中：

#outer {
    overflow: hidden;
    width: 800px;
    height: 600px;
}

#inner {
    height: 600px;
}

此示例假设您的图片为 800x600 像素，请根据需要进行调整。

【讨论】：

有什么办法可以让内部div的宽度自动变大？
否，但您可以使用 Javascript 为您计算。

【解决方案3】：

试试吧

overflow-x: auto;

【讨论】：