스크롤 막대가있는 컨테이너 내에서 div가 가로로 생성되었습니다.

Question

동적으로 생성 된 DIV를 스크롤 막대와 함께 가로로 표시하려고합니다. n 개의 DIV가있을 수 있습니다. 기존 HTML 구조 :

HTML (index.html을)

<div style="width:100%;float:left;" id="old"> 
    <div> 
     <h1>First Div</h1> 
     <div id="R1"> 
      <h1>First Div Internal</h1> 
      <a id="R1_index" class="close_page" href="javascript:void(0)">Close</a> 
     </div> 
    </div> 
    <div> 
     <h1>Second Div</h1> 
     <div id="R2"> 
      <h1>Second Div Internal</h1> 
      <a id="R2_index" class="close_page" href="javascript:void(0)">Close</a> 
     </div> 
    </div> 
</div> 

나는 솔루션이 link을 따르십시오. 하지만 동적 DIV로드 구조가 엉망으로 보일 때. 그것은 외모와 같은 :

HTML (index.html을)

<div style="width:100%;float:left;" id="old"> 
    <div id="items">Missing Internal Content</div> 
    <div id="items">Missing Internal Content</div> 
</div> 

나에게 사람들을 도와주세요.

Answer 1

나는 컨테이너의 div (예 : 귀하의 예에서 "old")가 서로가 아니라 아래에있는 것이 문제라는 것을 상상해보십시오.

#old { 
    overflow: auto; 
    white-space: nowrap; 
} 

을하고 childern-div의 인라인 블록 요소합니다 :

그 문제가있는 경우, 당신은 당신의 용기에 다음과 같은 스타일을 추가 예상대로 다음

#old > div { 
    display: inline-block; 
} 

작동한다을 . 작업 솔루션을 참조하십시오 FIDDLE Example

그렇지 않으면 문제가 정확히 무엇인지 더 잘 예/설명을 제공하십시오.