1

私は一日中、コンテナーのコンテンツを列の形で表示し、子divの数が増えると下ではなく横に拡張するように努めてきました。-vendor-box-orientレイアウトから まですべてを試しましたがinline-block、何も機能していないようです。ユースケースはこちら。

<div class="container">
    <div class="row">
        <div class="item">
        </div>
        <div class="item">
        </div>
    </div>
</div>

オーバーフローを可視のままにするのではなく、十分な数の子がある場合は超過することに.containerなっています。では、垂直の場合に機能するように、集合的な子の幅に折りたたむにはどうすればよいですか?overflow-x:scroll.row.container.row

ユースケース: JSfiddle

4

2 に答える 2

3

あなたのフィドルのデモを見て、私はこの答えをThirtyDot（ここでフィドル）で見つけ、右に流れるコンテンツが正しくフィットするように同じことをするように適応しました。スクロール機能が完全に正しいわけではありませんが、お知らせください。ULこれはand以外の要素でも機能するはずLIですが、マークアップを変更して確認していません。

もちろん、これは奇妙で素晴らしいdisplay: table-プロパティを使用しています。そうすることで、一部のレガシーブラウザではサポートされないことになりました。いつ使用できますか? を参照してください。サポートの詳細については。

私は以下をテストしました：

Firefox 13 -動作するChrome 最新-動作するOpera 11.67 -動作するIE 8 -動作するIE 9 -動作するIE 7 -動作しないSafari -未テスト





したがって、IE7 のサポートが重要な場合、少なくともそのブラウザーでは機能しません。しかし、私が何かを誤解していない限り、それは他のすべてでうまく機能します.

マークアップ

<div>
    <div class="super-scroller">
        <ul class="horizontal-fit">
            <li class="outer-block"><span class="inner-block"></span></li>
        </ul>
    </div>
</div>

CSS

.super-scroller {
    border: 1px solid green;
    overflow-x: scroll;
    padding: 5px;
    margin: 10px auto;
    width: 90%;
}
.horizontal-fit {
    display: table;
    border: 1px solid blue;
}
.horizontal-fit .outer-block {
    display: table-cell;
}
.horizontal-fit .inner-block {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 5px;
    width: 100px;
    height: 100px;
}

http://jsfiddle.net/suJ3d/2/

インタラクティブなデモ:

http://jsfiddle.net/userdude/suJ3d/5/embedded/result/

于 2012-06-23T04:13:33.807 に答える
0

これが実際の例です。青い div 内の赤い div の移動。

鍵は 

overflow-x:scroll;
white-space: nowrap;

外側のdivと

display:inline-block;

内側のdivで

http://jsfiddle.net/WTw2P/2/

于 2012-06-23T03:23:12.333 に答える