0

複数のデータのチャンクを隣り合わせの列に表示しようとしています。コンテナーをインラインで表示するように設定しました。これは、列が比較的薄い場合にうまく機能します。列が水平方向の画面の長さを超えるとすぐに、他の列が下部に追加されます。

私の質問はこれです:水平スクロールバーを使用して、水平に配置されたインライン列 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;

}

ありがとう、
マイケル

4

2 に答える 2

2

私たちは、ブラウザが通常の仕事をしないようにしようとしています。つまり、現在のウィンドウサイズに収まるようにレイアウトすることです。ものがブロックであるかインラインであるかは関係ありませんが、それでもブラウザはそれをウィンドウ内に収めようとします。

コンテナに固定幅を指定して、すべての列に十分なスペースを確保できます。

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

}

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

サンプルページ

サンプルページのスクリーンショットhttp://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

于 2009-08-14T17:38:17.503 に答える
0

カオスは正しいと思いますそれはoverflow-x: scroll;代わりかもしれません

于 2009-08-14T16:32:50.630 に答える