0

我有一个带有导航缩略图的图像滑块。我想要做的是缩略图将被布置成 2 行。每行有 6 个 div（意味着首先显示 12 个 div），然后当有多余时它水平溢出并且应该有一个水平滚动。这与这个问题有关：

强制横向扩展。唯一不同的是

我希望我的 div 显示 2 行而不是 1 行。我已经设法使用上述链接给出的解决方案显示一行。

这是我的代码：HTML

<div id="nav">
      <div id="thumbsWrap">
            <img alt="thumbnail">
            <img alt="thumbnail">
            <img alt="thumbnail"> 
             and so on and so on......
       </div>
 </div>

CSS

    #nav{bottom: 26px;height: 128px;left: 108px;overflow-x: auto; overflow-y:hidden;     position: absolute;width: 756px;}
#nav #thumbsWrap{width: auto; white-space: nowrap}
#nav a.thumbs{width:116px; height:95px; background: #4e5b63; display:inline-block; border-radius:8px; margin:6px 10px 0 0;}

任何帮助将不胜感激。提前致谢

4

2 回答 2

2

如果您要使用相同的 div 两次，请使用类而不是 ID。ID 不应该重复，特别是如果 JS 正在使用它们。

于 2012-08-31T07:47:42.933 回答
1

唯一简单的方法是添加两次相同的 div。

<div id="nav">
    <div class="thumbsWrap">
        <img alt="thumbnail">
        <img alt="thumbnail">
        <img alt="thumbnail"> 
        and so on and so on......
    </div>
    <div class="thumbsWrap">
        <img alt="thumbnail">
        <img alt="thumbnail">
        <img alt="thumbnail"> 
        and so on and so on......
    </div>
</div>

在这里演示http://jsfiddle.net/txCzq/32/

于 2012-08-31T06:58:52.850 回答