動的コンテンツとオーバーフロー-y隠しdivで水平スクロールバー

Question

divの1つの画像でdivを持つ必要があります。div内の画像の量はいつでも変更できます。だから私は水平スクロールバーが欲しい。 私は以下のような構造を持っています。私はCSSでそれを達成しようとしましたが、残念ながらそれは動作しません。 CSSと

<div id="scroll-wrapper"> 
    <div id="thumbnails"> 
    <div class="thumbnail-container active"> 
     <img src="foobar" /> 
    </div> 
    <div class="thumbnail-container"> 
     <img src="bar" /> 
    </div> 
    </div> 
</div> 

コード： http://jsfiddle.net/c622c3w9/2/

注私はJavaScriptを使用して解決策を望んでいません。

Answer 1

私はあなたが2つのだけのことを行う必要があり

#thumbnails { 
    padding-bottom: 10px; 
    max-height: 50px; 
    min-width: 100px; 
    overflow-y: hidden; 
    overflow-x: scroll; /*add this so you get bottom scrollbar*/ 
    white-space: nowrap; /*add this to stop images wrapping so thay stay on one line*/ 
} 

.thumbnail-container { 
    display: inline-block; 
    position: relative; 
    line-height: 5px; 
    border: 2px solid steelblue; 
    margin: 3px; 
    display: inline-block; 
    /*float: left; remove this otherwise scroll will not work*/ 
    margin-bottom: 15px !important; 
} 

http://jsfiddle.net/c622c3w9/3/

Answer 2

を仕事にスクロール取得するfloat: leftを削除する必要がありました。 Fiddle。

.thumbnail-container { 
    ....... 
    // float: left;  <== Remove 
} 

#thumbnails { 
    ..... 
    white-space: nowrap; // Add 
}