CSS 여러 div 오버플로

한 줄에 10 개의 div가있는 샘플이 하나의 컨테이너에있는 사이트 바닥 글에 있습니다. 이 사이트는 반응이 빠른 사이트 일 것이고 스마트 폰에서도 작동 할 것입니다.CSS 여러 div 오버플로

스마트 폰에서 가로 스크롤보기를 만들고 싶지만 오버 플로우 div (예 : 4,5,6,7,8,9,10)를 뷰포트 외부에 배치해야합니다. 나는 그들을 안으로 밀어 넣을 것이다). this jsFiddle의 CSS를 사용하면 행에 자리가없는 div는 같은 행이 아니라 뷰포트 아래에 배치됩니다. 어떻게하면 같은 행에 배치 할 수 있습니까?

기본적으로, 뷰포트 단지 N 사각형, 그 나머지는 내가 그들을 밀어 것, 할 수 있습니다.

P.S.을 이 수동으로, jQuery 일부 스크롤 뷰어 플러그 인 있습니까? (jQuery Mobile이 아님)

출처

2012-07-24 DaJackal

다른 wrapping div가 필요할 수도 있습니다. 내가 본 대부분의 슬라이더에는'overflow : hidden '이라는 div가 있고 내부에는 움직이는 div가 있습니다 (적어도 모든 내용을 담을 수있을 정도로 넓습니다). 플러그인에 관해서는 [jQuery Tools] (http://jquerytools.org/)를 몇 번 사용했습니다. – MrOBrian

@MrOBrian 정답으로 표시하도록 답변으로 의견을 말하십시오. 매우 도움이되었습니다. 감사합니다. – DaJackal

아 멋지다. 나는 그것이 당신이 찾고있는 것이 었는지 확실하지 않았지만 그것이 도움이 되었기 때문에 기쁩니다. :) – MrOBrian

나는 다른 포장 사업부를해야 할 수도 있습니다 생각합니다. 내가 본 대부분의 슬라이더는 overflow: hidden으로 div를 가지며 그 안에는 움직이는 div가 있습니다 (적어도 모든 내용을 담을 수있을 정도로 넓습니다). 플러그인에 관해서는, 내가 몇 번 jQuery Tools을 사용했습니다.

출처

2012-07-25 16:00:56 MrOBrian

this는 무엇을 의미합니까?

HTML

<body> 
     Content 
     <div class="footer"> 
      <div class="footer_contents"> 
        <div class="square selected">1</div> 
        <div class="square">2</div> 
        <div class="square">3</div> 
        <div class="square">4</div> 
        <div class="square">5</div> 
        <div class="square">6</div> 
        <div class="square">7</div> 
        <div class="square">8</div> 
        <div class="square">9</div> 
        <div class="square">10</div> 
      </div> 
     </div> 
    </body>

CSS

.footer { 
    height:50px; 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    overflow: scroll; 
    overflow-y: hidden; 
} 

.footer_contents { 
    height: 50px; 
    width: 1000px; 
    margin: auto; 
}

출처

2012-07-24 17:13:44 ohiock

CSS 여러 div 오버플로

답변

관련 문제