Question

我有一个带有导航缩略图的图像滑块。我想要做的是缩略图将被分为两行。每行有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;}

任何帮助都将受到高度赞赏。提前致谢

Answer 1

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

Answer 2

唯一简单的方法是，将相同的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/

容器div内的2行div只能水平滚动

2 个答案: