0

これは、この質問に対する私の2回目の試みです。私は最初の試みを台無しにして、それを削除するように要求しました。

したがって、基本的に、item幅100pxの小さなdivがたくさんあり、1本の水平線（次の行に折り返してはいけません）に、別のcontainerdiv300pxに含まれています。

divに水平スクロールバーが必要ですcontainer。これにより、小さいdivを下の行に折り返すことなく、左右にスクロールできitemます。

動的に生成されるitemため、最終結果にdivに含まれるdivの数がわからないことに注意してください。container

IE8でこれを行うことは可能ですか？

このjsfiddleの例では、唯一の問題は、sが以下の行に折り返されていることであるように思われitemます。それらが単一の上部水平線上にとどまる場合、水平スクロールバーは機能すると思います。

4

3 に答える 3

4

の代わりにfloat: left、で使用display: inline-blockし.itemます。次に、ラッピングを防ぐためにに追加white-space: nowrapします。.container

これは、IE7/8およびすべての最新のブラウザーで機能します。

参照： http： //jsfiddle.net/thirtydot/M2sgv/22/

.container {
    width: 300px;
    overflow-x: scroll;
    white-space: nowrap;
}

.item {
    width: 100px;
    display: inline-block;
    *display: inline; /* for ie7 */
    zoom: 1;
}
于 2012-06-22T11:53:00.047 に答える
0

ここに解決策がありますhttp://jsfiddle.net/M2sgv/21/

「1200px」の固定幅の別のコンテナを追加しただけで、任意の幅を選択できます。次に、「overflow:auto;」を追加しました。コンテナー div の css に追加し、overflow-x、overflow-y を削除しました。これら 2 つはすべてのブラウザでサポートされているわけではないため、使用しないでください。上記のソリューションは、すべてのブラウザーで機能します。

于 2012-06-22T12:01:57.077 に答える
0

JQuery を使用してこれを実現できます。これがJsfiddle です。

更新されたコードは次のとおりです。

JQuery コード:-

$(document).ready(function(){
   var contWidth = $('.container .item').length * $('.container .item').width();
   $('.container').width(contWidth);    
});​

HTML:-

<div class="scrollContainer">
    <div class="container">    
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
        <div class="item">item 1</div>
    </div>
</div>

CSS :-

.scrollContainer 
{
    width: 500px;
    overflow: auto;
}
.item
{
    width:100px;
    float:left;
}

編集 :-scrollContainer幅は、要件に応じて任意に設定できます。

于 2012-06-22T12:06:35.843 に答える