18

水平スクロール div に多数のレコードを表示したいと考えています。私は Twitter Bootstrap を使用しており、各データ レコードを列として表す div 行を設定しています。

この部分で Bootstrap グリッドをダンプする必要がある場合は、それで問題ありません。設計された方法で実際に使用しているとは思えません...この部分で Twitter Bootstrap を使用しない場合、私の質問はほぼ同じですフローティング div が改行に折り返されないようにします。この質問に対する受け入れられた回答の問題は、コンテナの合計幅を計算できると想定していることです。私の場合、アイテム div の数は動的です。

純粋な CSS/HTML ソリューションを探しています。Javascript が必要な場合は、jQuery なしで AngularJS を使用しています。

私の例: http://jsfiddle.net/V5zWT/2/

CSS

.DocumentList
{
    overflow-x:scroll;
    overflow-y:hidden;
    height:200px;
    width:100%;
    padding: 0 15px;
}

.DocumentItem
{
    border:1px solid black;
    padding:0;
    height:200px;
}

HTML

<div class="DocumentList"> 
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
            Record 12345
            <br/>
            More data
            <br />
        </div>
    </div>
</div>

フィドルからわかるように、最初の 4 つのレコードのみが表示されます。CSS フロートのため (私は推測しています)、スクロール バーはアクティブにならず、他のレコードは表示されません。オーバーフロー y を非表示にしない場合は、下にスクロールして非表示のレコードを表示できますが、それは目的ではありません。

4

3 に答える 3

2

多分これはあなたを助けるでしょう：

フィドル

幅が固定されている場合、.DocumentItemスクロール要素の幅を数えて動的に設定できます。

<script type="text/javascript">
    var totalWidth = $('.DocumentItem').length * $('.DocumentItem').width();
    $('.row').css('width', totalWidth + 'px');
</script>
于 2013-11-05T22:31:53.250 に答える