html - 仅水平滚动的容器 div 内的 2 行 div

Question

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

Force horizontal expansion .唯一不同的是

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

这是我的代码: 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 使用它们时。