css - float：leftdivsを次の行に移動しないように強制します

Question

float：leftプロパティといくつかの幅を持つ20の同じdivを取得したとしましょう。1行にまとめて、ページを水平方向にスクロールさせるためだけに画面に収まらない場合は、それらを配置します。

score 21 · Accepted Answer

これが基本的にフロートの仕組みです。white-space: nowrap;説明されている動作が必要な場合は、代わりに、たとえばコンテナ上でdisplay: inline-block;、floatの代わりに何かを行うことができます。

.container {
    white-space: nowrap;
}
.line {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    white-space: normal;
}

ただし、注意すべき点が1つあります。このアプローチでは、div間の改行/スペース/タブにより、レンダリングでそれらの間にスペースが生じます。

score 2 · Accepted Answer

display: inline-blockdivの代わりに使用float: leftし、プロパティwhite-space: nowrapを親コンテナに追加します。

フィドルを使ったデモ;）http://jsfiddle.net/NPzsV/4/

score 0 · Accepted Answer

高さを親divに設定し、プロパティoverflow：scrollを追加します

<div class="parentDiv"> 
    <div class="line">ddd</div>
    <div class="line">ddd</div>
    <div class="line">ddd</div>
     ...
</div>

およびcss：

.parentDiv{height:50px; overflow: scroll;}

score 0 · Accepted Answer

0

親要素にハード幅を設定します。

 body{ width:8000px; }

于 2012-10-16T16:40:55.130 に答える

4 に答える 4