0

ブラウザーの全幅にまたがる水平線にスクロール div ボックスのストリップを実装する方法を知りたいです。

<style>
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:200;height:300px;background:grey;margin:10px;padding:20px;}</style>

<div class="block_box">
                <div class="block">1</div>
                <div class="block">2</div>
                <div class="block">3</div>
                <div class="block">4</div>
                <div class="block">5</div>
                <div class="block">6</div>
                <div class="block">7</div>
                <div class="block">8</div>
            </div>

私は試しましたが、4または5ブロック後にブラウザの後ろに隠れず、代わりに新しい行にブレーキをかけます

4

6 に答える 6

1

あなたのCSSに追加display:inlineしてwhite-space:nowrap;

.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; display:inline; white-space:nowrap; width:200;height:300px;background:grey;margin:10px;padding:20px;}

ホワイトスペースについてはこちら。より詳しい説明

于 2013-04-30T17:54:30.100 に答える
1

これは、あなたが望むもののデモのフィドルです：

http://jsbin.com/anekos/1/edit

新しい CSS:

.block_box{ height:320px; width:100%; overflow:auto;top:100px;}
.block{display: table-cell; min-width:200px;height:300px;background:grey;margin:10px;padding:20px;
于 2013-04-30T17:58:13.347 に答える
0

各ブロックの幅にパーセンテージを使用して、ブラウザーの幅に収まるようにします。

于 2013-04-30T17:52:31.890 に答える
0

「block_box」のクラスでdivに幅を設定する必要があります

于 2013-04-30T17:53:38.153 に答える
0

overflow-x: scroll;css スタイルを .block_box div に適用してみてください。

于 2013-04-30T17:53:51.047 に答える