2009-08-14 17 views
0

複数のチャンクを横に並べて表示しようとしています。インラインで表示するコンテナを設定しました。これは、列が比較的薄い場合に効果的です。列が水平の画面の長さを超えるとすぐに、他の列が下部に追加されます。HTMLディビジョン、列、水平スクロールバー

私の質問は次のとおりです。水平方向に配置されたインライン列のdivを水平スクロールバーで表示するにはどうすればよいですか?

注:実際にはスクロールバーが必要です。私は要素を並べて欲しい。

<div class="container"> 
    <div class="child" id="1">Stuff</div> 
    <div class="child" id="2">Stuff</div> 
</div> 

--------- 

.child { 
    /*float:left; 
    margin-right:5em;*/ 
    display:inline; 
} 
.container { 
    display:inline; 
    overflow: scroll-x; 
    white-space: nowrap; 

} 

おかげで、
マイケル

答えて

2

我々はそれをやってから、ブラウザを維持しようとしているが、通常の仕事です。そのようにものをレイアウトします現在のウィンドウサイズに収まるようにします。ものがブロックかインラインかどうかは関係ありませんが、ブラウザはウィンドウ内にそれを収めるよう試みます。

あなたはすべての列のための十分なスペースを確認するために、コンテナ固定幅を与えることができます:

.child { 
    margin-right:50px; 
    float:left; 
    width: 100px; 
    border: 1px black solid; 

} 

.container { 
    width: 1520px; 
    overflow: scroll-x; 
    border: 1px red solid; 
} 

example page

screenshot of the example page http://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

0

私はそれだけでoverflow-x: scroll;代わり

かもしれ混乱が正しいと思うが
+0

@Kilrizzyは - 両方試してみました – Dirk

関連する問題