오버 플로우 숨겨진 사용하여 아이들이 시각적를 들어 컨테이너

Question

에 대한 너무 큰 부분적인 요소를 보여,이 바이올린을 방문하십시오

http://jsfiddle.net/rR8Hh/

내가 달성하기 위해 노력하고 효과는,이 예에서 , 5th div.child의 왼쪽이 4th child div의 오른쪽에 표시되어야합니다.

대신 줄 바꿈이 있기 때문에이 요소를 전혀 볼 수 없습니다. white-space: nowrap을 사용하면 효과가 없습니다.

HTML :

<div id="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
    <div class="child">4</div> 
    <div class="child">5</div> 
    <div class="child">6</div> 
</div> 

CSS :

#parent{ 
    height:90px; 
    width:400px; 
    overflow:hidden; 
    border:3px solid black; 
    white-space:nowrap; 
} 
.child{ 
    float:left; 
    height:80px; 
    width:80px; 
    margin:5px; 
    border:1px solid red; 
} 

내가 전에 내 원하는 효과를 달성 것을 알고,하지만 난 그것을 어떻게 알아낼 수 없습니다.

Answer 1

이 작업을 수행하는 다소 힘들지만 작동하는 방법은 다른 div에 큰 div가있는 div를 래핑하는 것입니다. 예를 들면 :

CSS :

.wrap{ 
    width:9999px; 
} 

HTML : 당신이 얼마나 많은 아이 요소 몰라서

<div id="parent"> 
    <div class="wrap"> 
     <div class="child">1</div> 
     <!-- etc --> 
    </div> 
</div> 

가 난 단지 9999에 폭을 설정합니다. 폭은 서버가 페이지를 출력 할 때 계산하거나 설정할 수 있습니다. 또는 자바 스크립트 (wrapper width = number of child elements * child outer width)를 사용할 수 있습니다.

여기서 작동 중입니다. http://jsfiddle.net/rR8Hh/4/