3

div タグの要素を折り返さずに、ページの使用可能なスペースを超えて拡張するにはどうすればよいですか?

たとえば、私は持っています：

<div class="container">
<div class="row">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
    <div class="child">19</div>
    <div class="child">20</div>
</div>
<div class="row">
    <div class="child">1</div>
    <div class="child">2</div>
    ...
    <div class="child">19</div>
    <div class="child">20</div>
</div>
</div>​

CSS:

.container{
    overflow: scroll;
    width: 100%;
}
.row {
    clear: both;
}

実際の出力:

ここに画像の説明を入力

望ましい出力:

ここに画像の説明を入力

http://jsfiddle.net/kcW6w/

コンテナー要素の幅を 100% にしたいのですが、各行が折り返されないようにスクロール バーが必要です。

.row要素に大きな任意の幅を設定すると、正しく機能することがわかりました。任意の幅を設定する以外にこれを行う別の方法はありますか? 幅は動的に変化するため、ハードコーディングされた幅は使用しない方がよいでしょう。

.row {
    clear: both;
    width: 2000px;
}

http://jsfiddle.net/kcW6w/1/

また、設定した任意の値が原因で、Safari のスクロール バーに矛盾があることにも気付きました。

Mac OS X の Chrome でのスクロール バーの不一致 (右端までスクロール):

ここに画像の説明を入力

Safari ではスクロール バーも表示されません。

4

1 に答える 1

1

これを試すことができます -デモ

CSS

.container {
    overflow: scroll;
}

.row {
    white-space: nowrap;
    font-size: 0;
}

.child {
    font-size: 16px;
    width: 60px;
    height: 60px;
    border: 1px solid black;
    background-color: #ccc;
    display: inline-block;
}
于 2012-12-12T22:05:36.820 に答える