force float：左のdivsは次の行に移動しません

私はフロートで同じdivを持っているとしましょう：左のプロパティと幅。私はそれらを1行に入れて、ページを水平にスクロールさせるために画面に収まらないようにしたい。force float：左のdivsは次の行に移動しません

2012-10-16 Adarchy

山車がどのように機能するか、基本的です。記述された振る舞いが必要な場合は、コンテナ上のwhite-space: nowrap;や浮動小数点の代わりにdisplay: inline-block;など、何か別の処理を行うことができます。しかし注意すべき

http://jsfiddle.net/NPzsV/3/

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

一つのこと：このアプローチでは、divタグの間に改行/スペース/タブはレンダリングでそれらの間のスペースが発生します。

出典

2012-10-16 16:46:17 xec

それはありがとう、ありがとう。私は、白い空白を意味します。体に割り当てられないため、ページ構造の残りの部分をすべて破棄しないでください。しかし、それは動作します。ありがとうございました。 – Adarchy

デモのコンテナだったので、はい、私はそこにボディを持っていました:) – xec

は、親のdivに高さを設定し、プロパティのオーバーフローを追加：

<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;}

出典

2012-10-16 16:40:51

助けてくれてありがとうございますが、私はそれをfiddleでチェックしました。そして、とにかく私はページをスクロールしたい、divではない。 – Adarchy

：

body{ width:8000px; }

Demo

出典

2012-10-16 16:40:55 bookcasey

誰がこれを落としたのですか？これははっきりと機能します。今OPが望むものではないかもしれないが、彼がブラウザウィンドウをスクロールしたいのであれば、確かにうまくいく。 – thatidiotguy

お試しいただきありがとうございますが、私はそれをプロのように見たいと思っています。もし8000pxであれば十分でしょうか？ 80 000？ 800 000？マウスホイールを使ってすべてをスクロールした人には報酬がありますか？：）ただ言って。 – Adarchy

私は非常に混乱しています。あなたは、 "[divs]を1行に入れて、ページを水平にスクロールさせるために画面に収まらない場合は"尋ねました。私は喜んで助けますが、あなたが実際に望むものを記述してください。 – bookcasey

divタグの使用display: inline-block代わりのfloat: left、およびその親コンテナのプロパティwhite-space: nowrapを追加します。

デモ：あなたのフィドルとhttp://jsbin.com/akiniv/1/edit

デモ;）http://jsfiddle.net/NPzsV/4/

出典

2012-10-16 16:45:17 tuff

それは動作します、ありがとう。空白を追加する必要があるのは、コンテンツ自体を1行に表示しないようにするためです。 – Adarchy

はい、子要素は親の（ほとんどの）プロパティを継承します。もちろん、必要に応じてこの動作を無効にすることもできます。 – tuff

force float：左のdivsは次の行に移動しません

答えて

関連する問題