0

div 内の正方形のセットを一列に並べ、正方形が div の幅を超えたときに水平スクロールをトリガーするにはどうすればよいですか?

この jsfiddle は、幅が狭い場合に灰色の四角形が誤って折り返されていることを示しています。灰色の四角形は常に 1 行に配置し、コンテナー div には水平スクロールを設定する必要があります。

http://jsfiddle.net/anqKb/

私が試したこと：

さまざまなposition: absolute属性overflow: scroll。スクロール可能なコンテナ div の望ましい効果が得られる組み合わせはないようです。

4

6 に答える 6

0

css を次のように更新します。

.container {
    width: 100%;
    height: 100px;
    background: rgb(100, 100, 100);
    overflow:auto;
}

お役に立てれば

于 2013-10-29T06:40:31.707 に答える
0

このデモを確認してください。次のようにコンテナ クラスを変更します。

.container {
    width: 100%;
    height: 120px;
    background: rgb(100, 100, 100);
    white-space: nowrap;
    overflow-y:hidden;
    overflow-x:scroll;
}
于 2013-10-29T06:45:08.170 に答える
0

空白を追加: nowrap とともに、スクロール x を表示し、y を非表示にして、コンテナーに幅を追加します。

<div class="container">
<div style="width: auto; white-space: nowrap">
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
    <div class="thumbnail">
    </div>
</div>


.container {
width: 500px;
height: 120px;
background: rgb(100, 100, 100);
overflow-x: scroll;
overflow-y: hidden;

}

チェック： http: //jsfiddle.net/anqKb/19/

于 2013-10-29T06:58:02.553 に答える
0

正方形を含む別のものを使用して、固定幅を設定できます。

.setWidth {
    width: 740px;
}

www.jsfiddle.net/anqKb/10/

于 2013-10-29T06:46:36.087 に答える