가로로만 스크롤되는 컨테이너 div 안에 div 행 2 개

Question

탐색 용 축소판이있는 이미지 슬라이더가 있습니다. 내가 원하는 것은 썸네일이 2 행으로 배치된다는 것입니다. 각 행에는 6div (처음에는 12div가 표시됨)가 있고 초과 된 경우 가로로 오버플로되며 가로 스크롤이 있어야합니다. 이 질문과 관련이 있습니다 :

Force horizontal expansion. 차이점은

div가 하나가 아닌 2 개의 행을 표시하도록하고 싶습니다. 위의 링크에서 제공하는 솔루션을 사용하여 하나의 행을 표시 할 수있었습니다. HTML 어떤 도움은 매우 극명하게 될 것이다

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

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

CSS :

여기 내 코드입니다. 미리 감사드립니다

Answer 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/

Answer 2

두 번 클래스 아닌 ID를 사용 DIV 같은를 사용하려는 경우 데모. 특히 JS가 사용하고있는 경우에는 ID를 중복해서는 안됩니다.