フロート：DIVを使用しているときに問題が残っていますか？

Question

テーブル内に2列のように2つのDivsを並べて配置する際に問題がありますか？時にはそれらは正しく整列することがありますが、ときどきDivが左のDivの下に表示されることがあります。

どのようにdivを常に並べて表示するように設定できますか？

おかげ

box model

について

Answer 1

読むには、通常は、理由の幅を変え、あなたのdivの内側のパディングの問題が発生します。 divがスペースに収まるには余りにも幅が広すぎると、divは他のものの下に座ります。

たとえば、幅が200ピクセルに設定された2つのdivがあるとします。

パディングを5pxに設定すると、実際の幅は210px（ブラウザによって異なる）になります。

しかし、それには多くの理由が考えられます。

Answer 2

あなたは、画面の大きさを制御することはできませんので、あなたの訪問者は、このusing-になることを、この動作を受け入れる方が良いでしょう、あなたのレイアウトは、携帯電話などのデバイス用に正常に低下することを可能にするなど

Answer 3

問題は幅で、左の浮動小数点を持つ2つのdivが狭い親と出会うと、CSSの仕様によって右端が置かれます。

Answer 4

私は、彼らが 'フロート' プロパティを理解することは本当に参考になっているalistapart.com

CSS Swag: Multi-Column Lists

Faux Absolute Positioning

で、この二つの大きな記事を読んですることをお勧めいたします。

Answer 5

divが1行に収まらない場合は、表示されません。したがって、ピクセル値を使用して画面の幅が十分でない場合、それは機能しません。しかし、47％のような相対的な幅を使用すると、ウィンドウが開いたときに収縮するため、常に正しいサイズになるようにすることができます。今は両者が20pxの幅であれば少し変わって見えるかもしれませんが、これはいつもお互いに隣り合っていることを保証します。 ：D

Answer 6

フローティングdivを作成する際に重要なことは、「float」属性と「width」属性を設定することです。

<div style="float:left;width:100px">Left Div</div> 
<div style="float:left;width:100px">Middle Div</div> 
<div style="float:left;width:100px">Right Div</div> 
<div style="clear:both;">Bottom Div</div> 

が生成されます。

============================================== 
| Left Div | Middle Div | Right Div | 
|    |    |    | 
|    |    |    | 
|    |    |    | 
|    |    |    | 
============================================== 
|     Bottom Div     | 
============================================== 

を使用すると、小さなウィンドウに、ブラウザのサイズを変更する場合は、divタグをラップします。これがデフォルト動作です。