9

ブートストラップで構築されたサイトがあり、jquery.dragscroll プラグインを使用してスワイプ可能なヘッダーを持つテーブルを作成したいが、組み込みの流動グリッドは保持します。

テーブルのヘッダーを作成したいので、次の HTML を使用しています。

<div class="row-fluid">
    <div class="span12">
        <div style="overflow:hidden;width:90%;">
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
        </div>
    </div>
</div>

コードはこちら: http://jsfiddle.net/cVfzJ/1/

Fiddle でわかるように、すべての div が 2 行に表示されています。私の目的は、すべての div を 1 行に表示することです (オーバーフローした div を非表示にします)。

質問が明確であることを願っています

4

1 に答える 1

24

<div>all の合計にwidth等しいすべての のコンテナが必要<div>です。次に、このコンテナの親にはoverflow: auto.

レンダリングの前に合計幅がわからない場合は、JS を使用して計算できます。

あなたの例を続ける：

<div class="row-fluid">
    <div class="span12">

        <!-- Changed from `hidden` to `auto`. -->
        <div style="overflow:auto;width:90%;">

            <!-- This is the div that does the trick: -->
            <div style="width:1200px;">

            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>
            <div style="display:inline-block;width:100px;">some content</div>

            </div>

        </div>
    </div>
</div>
于 2013-05-27T13:17:44.297 に答える