サイドバイサイドの混乱を追加する

Question

私はこのシンプルなHTMLを間違っているようです。私は現在、私が作ったこのテストページにページの途中でサイドのdivによって側を追加しようとしています：

http://www.comehike.com/hiking_dev.php

私が追加されたコードは、このようなものだった：私は追加

<div style="width: 460px; float: left; "> 
<strong>Test hello</strong> 
</div> 
<div style="width: 300px; float: right; "> 
<strong>Test hello 2</strong> 
</div> 

<strong>タグを使用すると、ページ上でそれをよりよく見つけることができます。

しかし、このような「怪我の危険性を考えるとき」のようなテキストが表示されていますが、そのテキストは下記の<p>タグに記載されています。なぜそこに現れているのですか？

他のdiv内で整列しようとしている2つのdivをラップする方が良いでしょうか？

Answer 1

、別の空のdivを追加します...。今のように、最初のdivの後に200ピクセルの空きスペースがあり、他のコンテンツを単純に囲むことができます。

フローティングdivの幅を増やすことはレイアウトには望ましくない場合があります。この場合は、clear:both;が最も一般的です。

Answer 2

オーバーフローをhiddenに設定して親divの2つのdivを囲みます。

<div style="overflow:hidden;"> 
    <div style="width: 460px; float: left; "> 
    <strong>Test hello</strong> 
    </div> 
    <div style="width: 300px; float: right; "> 
    <strong>Test hello 2</strong> 
    </div> 
</div> 

代替（他の人が指摘したように）第三の要素を使用することです：

<div style="clear:both;"></div> 

これに優れているとして、それは議論の余地があります。通常、いずれかうまくいけます。トピックに関する投稿は次のとおりです。 Floated Child Elements: overflow:hidden or clear:both?

Answer 3

960pxというページ全体の幅があるためです。 divの幅は760px（400 + 300）です。 2番目のdivに200ピクセルを追加した場合は問題ありません。

編集：埋め込みのために、divのいずれかを150pxで増やしても問題ありません。これは、その下に、後続のすべてのコンテンツをプッシュするために2つの浮動divを引き起こします

<div style="clear:both;"></div> 

あなたの2つの浮動divをした後

Answer 4

clear:both;で2つのdivの下にdivを追加する必要があります。他の提案のようにdiv3を追加するか、要素にclear:both;を追加します。