컨테이너의 너비가 자식의 너비의 합보다 짧은 경우 div 요소 간의 줄 바꿈을 금지하는 방법

Question

컨테이너 div 요소와 일부 자식 div 요소가 있습니다.

<div> 
    <div>foo</div> 
    <div>bar</div> 
    <div>baz</div> 
<div> 

줄 바꿈없이 한 줄에 자식 요소를 가로 방향으로 나열하려고합니다. 컨테이너 요소에 white-space:nowrap을 사용할 수 있고 자식에 대해 display:inline 또는 display:inline-block을 사용할 수 있다고 읽었습니다. 이것은 컨테이너의 너비가 충분히 길 때 작동합니다.

그러나 컨테이너의 너비가 어린이의 너비 합계보다 짧을 수 있습니다. 위에서 언급 한 방법은 이런 경우 줄 바꿈을 금지하지 않습니다. 나는 여전히 줄 바꿈을 금지하고 그들이 한 줄에 있어야하며, 여분의 부분은 hidden인데 컨테이너 폭이 충분하지 않은 경우입니다. 어떻게해야합니까?

Answer 1

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

#parent{ 
    overflow: hidden; 
    white-space: nowrap; 
} 

.child{ 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
} 

http://jsfiddle.net/YAp6k/