CSS 가로 스크롤 상자

Question

"타임 라인"효과를 만들기 위해 가로 스크롤 상자를 만들려고합니다 ...하지만 위아래로 스크롤하는 것처럼 보이지만 세로 스크롤 막대가 나타납니다 ... 생각은?

#container{ 
    width:500px; 
    height:250px; 
    border:1px solid #cc61b8; 
    overflow:auto; 
} 

.container-bits{ 
    width:250px; 
    height:498px; 
    float:left; 
} 

<div id="container"> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
</div> 

Answer 1

당신은 그들이 이뤄져 있도록 모두 함께 .container-bits의 폭을 가지고 당신의 #container 내부에 두 번째 컨테이너가 필요합니다 포장 :

#container{ 
    width:500px; 
    height:250px; 
    border:1px solid #cc61b8; 
    overflow:auto; 
} 
#container2{ 
    width:10000px;   // just an example 
} 

.container-bits{ 
    width:250px; 
    height:498px; 
    float:left; 
} 

<div id="container"> 
    <div id="container2"> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    <div class="container-bits">Content Here</div> 
    </div> 
</div>