DIV 내에 숨겨진 DIV의 일부를 표시

Question

나는 오늘 뭔가 분명히 놓치고 있습니다. 사람들은 약간의 도움을 부탁드립니다.

다른 DIV 안에 수평 행의 DIV가 있습니다. 세 번째 DIV가 부분적으로 상위 DIV에 의해 숨겨진 것으로 표시되기를 바랍니다. 그러나 그것은 전혀 보이지 않습니다.

.outer { 
    background: #800; 
    height: 90px; 
    width: 300px; 
    overflow: hidden; 
    white-space: nowrap; 
} 
.label { 
    float: left; 
    display: block; 
    background: #888; 
    width: 75px; 
    height: 50px; 
    margin: 10px; 
    padding: 10px; 
    line-height: 50px; 
    font-size: 45px; 
    text-align: center; 
} 

가 여기에 HTML의 :

다음은 CSS의 도움에 대한

<div class="outer"> 
    <div class="label">1</div> 
    <div class="label">2</div> 
    <div class="label">3</div> 
    <div class="label">4</div> 
</div> 

감사합니다!

Answer 1

나는 오늘 분명히 뭔가를 놓치고 있습니다. 사람들은 도움을 청합니다. .

누락 된 "명백한"문제는 충분한 수평 공간이 없기 때문에 세 번째와 네 번째 내부의 div이 아래로 떨어지고 있다는 것입니다.

이 문제를 해결하는 가장 간단한 방법은 포함 된 요소 (! 당신이 이미 그것을 가지고) white-space: nowrap으로, display: inline-block에 float: left에서 전환하는 것입니다 :

예를 들어, 내가 크롬의 개발자 도구를 사용하여 확인하는 경우

http://jsfiddle.net/rGfNY/

Answer 2

당신은이 숨겨진 외부 사업부의 오버 플로우에 의해 차단 될 것이다 (당신의 외부 DIV보다 더 큰), 새로운 사업부에서 그들을 포장 사업부를 폭을 제공 할 필요가있다.

참고 사항 : 해당 내부 div의 너비가 콘텐츠와 함께 조정되지 않았거나 특별히 높게 설정하거나 콘텐츠를 계산해야하거나 CSS로 하드 코딩 한 것이거나 자바 스크립트를 사용해야합니다. .

HTML :

<div class="outer"> 
    <div class="inner"> 
     <div class="label">1</div> 
     <div class="label">2</div> 
     <div class="label">3</div> 
     <div class="label">4</div> 
    </div> 
</div> 

CSS :

이

.outer { 
    background: #800; 
    height: 90px; 
    width: 300px; 
    overflow: hidden; 
    white-space: nowrap; 
} 
.inner { 
    width: 460px; 
} 
.label { 
    float: left; 
    display: block; 
    background: #888; 
    width: 75px; 
    height: 50px; 
    margin: 10px; 
    padding: 10px; 
    line-height: 50px; 
    font-size: 45px; 
    text-align: center; 
} 

작업 예 : 나보다 http://jsfiddle.net/f2wpm/