19

次のコードがあるとします。

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

rightDiv と leftDiv のコンテンツが 200 ピクセルの高さ (最小の高さ) を超えると、upperDiv は大きくならないため、そのコンテンツは下の div にオーバーラップします。大きなコンテンツのフロート属性を削除すると、それが大きくなり、問題が発生します。しかし、どの Div (rightDiv または leftDiv) が 200px の高さを通過するのかわかりません。どうすればこれを修正できますか?

ありがとう

4

4 に答える 4

45

#upperDiv次のいずれかを設定します。

overflow: hidden;
width: 100%;

また 

float: left;
width: 100%;

または、このような CSS 疑似要素 (IE8+ 互換) を使用してルールを作成します。

#upperDiv:after {
  content: "";
  display: table;
  clear: both;
}

最善の解決策
次のような再利用可能なクラス ルールを作成します。

.group:after {
  content: "";
  display: table;
  clear: both;
}

これで、これと同じ機能を必要とするあらゆるものに適用できます。例えば...

<div id='upperDiv' class="group" ... >

PS IE 6/7 との互換性が必要な場合は、この投稿をチェックしてください。

于 2010-10-24T19:13:42.640 に答える
8

フロートは段落内の画像などのために設計されているため、これは意図的なものです (複数の段落が画像を囲むことができます)。

Complex Spiral にはその理由が詳しく説明されており、Ed Elliot はフロートの周囲でコンテナーを拡張するための多くのアプローチについて説明しています。overflow: hiddenこのアプローチは、ほとんどの状況で最適に機能すると思います。

于 2010-10-24T19:14:51.407 に答える
7

後

 <div id='leftDiv' style='float:left;width:25%;'>
   content2
 </div>

追加

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

それはあなたの問題を解決します。

于 2013-03-09T19:27:17.247 に答える