javascript - 导航 div 滚动条

Question

您好，我有一个名为“nav”的 div，其中包含类为“thumbs”的 div。我正在尝试创建一个类似 div 的目录，可以滚动以显示更多缩略图。

到目前为止，这是我的 CSS:(请注意，每个拇指都是 position:absolute 并且是 left: positioned accordingly)

#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;
}

我希望它是可滚动的，这样如果缩略图超过 768 像素(导航宽度)，它可以滚动到左侧以查看更多内容。

谢谢

编辑:我忘了说我是在 PhoneGap 中这样做的。这将是一个移动应用程序。谢谢!

Answer 1

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

更新

如果预先知道缩略图的数量，则可以通过 CSS 设置内部 div 的宽度。否则，它可以设置为 onload 或每当通过 JS 添加/删除拇指时。

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