CSS水平滚动

我正在尝试创建一个<div>包含一系列只能水平滚动的照片。

它应该看起来像这样LINK http://cssdesk.com/L6Dsa;

然而，上述只能通过指定宽度来实现<div>其中包含照片（因此它们不会“自动换行”）。如果我不设置宽度 - 它看起来像这样；LINK http://cssdesk.com/zLQZ3

我可以使用 CSS 做什么来防止输入固定宽度，因为图像可能会有所不同。

Thanks

您可以使用display:inline-block with white-space:nowrap。像这样写：

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

检查这个http://jsfiddle.net/YbrX3/ http://jsfiddle.net/YbrX3/