0

高さと幅が固定されたdivを使用して簡単な効果を実行したいのですが、左から右にスクロールできるdivのセットを保持しています。

これがコードですが、何らかの理由で子供たちは浮きたくないです

.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.a > div​ {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

http://jsfiddle.net/SZzwP/

4

4 に答える 4

3

HTMLを変更する必要はありません（変更すべきではありません）。

white-space:nowrap折れ線を避けるために使用するだけです

.a{
    width:200px;
    overflow-x:scroll;
    border:3px solid red;
    white-space:nowrap;
}
.a > div {
    width:170px; height:170px;
    display:inline-block;
    background:#eee;
    border:1px dotted #ddd;
}

ここでそれを参照してください：http：//jsfiddle.net/5Rz98/3/

于 2012-08-31T01:32:15.483 に答える
1

各子に幅を指定170pxしましたが、親は。のみ200pxです。子供の幅を以下に変更してください50px：

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:45px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

また、overflow-x: auto最初は横スクロールが表示されないように指定してください。

スライダーの場合は、別のマークアップを使用する必要があります。

<div class="a">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS：

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:700px; height:170px;}
.a > div > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

フィドル： http： //jsfiddle.net/fPeUg/

于 2012-08-31T01:20:57.677 に答える
1

基本的には、2つを並べてdiv収容できる幅のコンテナの内側が必要です。これを行わずに、合計幅がover （コンテナ）のdiv2をフロートさせようとしています。div200px

HTML

<div class="a">
    <div class="inner">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS

.a{
    width:200px; 
    height:200px; 
    overflow-x:scroll; 
    border:3px solid red;
}

.inner{
    width:344px;
}

.inner div{
    width:170px; 
    height:170px; 
    float:left; 
    background:#eee; 
    border:1px dotted #ddd;
}​

http://jsfiddle.net/charlescarver/a4T8f/1/

于 2012-08-31T01:23:55.787 に答える
0

次のように、すべての内部divがフロートするのに十分な長さの幅を持つ.a内の別のネストdivが必要です。

<div class="a">
    <div class="b">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    </div>
</div>
​.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.b {width:800px}
.b > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

</ p>

于 2012-08-31T01:24:43.033 に答える