html - サイズがあり、改行がない、隣り合ったDiv

Question

改行なしで、たくさんの小さなdivを並べてほしい：

<div style="overflow: scroll;">

<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>

</div>

問題は、幅は機能しますが、オーバーフローすると新しい行に移動するため、水平方向にスクロールしないことです。

Answer 1

これはwhite-space＆で実現できdisplay:inline-block;ます。このように書いてください：

.parent{
 white-space:nowrap;
overflow:scroll;
}
.parent > div{
 display:inline-block;
 white-space:normal;
}

これをチェックしてくださいhttp://jsfiddle.net/EUtLh/

Answer 2

これらのdivが配置される一般的なコンテナの幅は、「width：100％」に設定する必要があります。これにより、サイズの拡大に適応できます。

Answer 3

これがあなたのためのスクリプトです。

それがまさにあなたが望むものであるかどうかはわかりません。

http://jsbin.com/anoran/edit#javascript,html

更新しました：

http://jsbin.com/anoran/2/edit

Answer 4

<div style="overflow-x: scroll; width:100%|400px">
    <div style="width:10000px">


<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>


    </div>
</div>

クロームで動作しました！