4

div 内に 2 つの div が含まれている場合:

<div style="border:1px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
</div>

2 つの内側の div は、コンテナー内の div では、そこにないかのように塗りつぶすために引き伸ばされないため、「非表示」としてレンダリングされます。これにより、醜いオーバーラップ/空白などが作成されます。

この問題をどのように解決しますか?

4

6 に答える 6

5

3 番目の div を挿入します。

<div style="clear:both;"></div>
于 2010-08-25T15:29:18.377 に答える
2

タグを閉じるのを忘れている可能性があると思います。これを試してください：

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>
于 2010-08-25T15:28:58.077 に答える
2

<br style="clear:both"/>, (または左にクリア)を追加してみてください。これは、コンテナー内の浮動要素に命を吹き込む一般的な方法です。

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>
于 2010-08-25T15:30:06.743 に答える
1

親要素は、フローティングされた子を含むように展開されることはありません。IE<8 はこれを行いますが、それはその不適切なブラウザーの長年のバグ (数百万のうちの 1 つ) です。最善の解決策は、親をフロートさせるか、高さ/幅を設定するか、CSS で overflow:auto を使用することです。

于 2010-08-25T15:33:26.790 に答える
0

外側の div はフローティングされていないため、高さを明示的に設定しない限り、この場合 (境界線以外) は表示されません。外側の div の高さを 20px に設定するか、フロートします。

于 2010-08-25T15:28:15.680 に答える
0

div にコンテンツを配置できない/配置できない理由はありますか? コンテンツがないため、重なり合って見えない状態で表示されます。

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>

2 つの div が隣り合わせに表示されます (テスト済みの IE6、Chrome 3、Firefox 3.5、IE7)。

于 2010-08-25T15:30:23.457 に答える