Question

嗨，我有一个名为“nav”的div，其中包含带有“拇指”类的div。我试图创建一个像div这样的目录，可以滚动显示更多的缩略图。

到目前为止这是我的CSS :(请注意，每个拇指都是位置：绝对位置：左侧：相应位置）

#nav {
    position:absolute;
    width:768px;
    height:214px;
    bottom:0px;
    /*-webkit-transform:translateY(214px);*/
    background:gray;
    overflow:auto;
}
.thumbs {
    position:absolute;
    width:80px;
    height:100px;
    margin:10px 10px 10px 10px;
    background:white;
}

我希望它可以滚动，这样如果缩略图超过768px（导航宽度），它可以向左滚动以查看更多内容。

由于

编辑：我忘了提到我在PhoneGap中这样做了。它将是一个移动应用程序。谢谢！

Answer 1

从您的Thumb类中删除position: absolute;并添加float: left;。应该这样做。

<强>更新

如果预先知道了拇指数，则可以通过CSS设置内部div的宽度。否则，可以设置onload或通过JS添加/删除拇指。

$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');

Answer 2

您可以与max-width，display:inline-block＆amp;组合使用此功能。 white-space。像这样：

#nav_outer {
    position:absolute;
    bottom:0px;
    background:gray;
    overflow:auto;
}
#nav {
    height:214px;
    max-width: 300px;
    bottom:0px;
    /*-webkit-transform:translateY(214px);*/
    background:gray;
    white-space:nowrap;
}
.thumbs {
    white-space:normal;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
    width:80px;
    height:100px;
    margin:10px 10px 10px 10px;
    background:white;
}

http://jsfiddle.net/xzcDD/3/

在我的示例中.thumbs less than the width of 300px然后有no scroll

导航div滚动条

2 个答案:

http://jsfiddle.net/xzcDD/3/