メニューdivの親divの自動高さ...どのように？

基本的な考え方は、子供の高さに応じてラッパーを自動的に高さを広げることです。しかし、問題は、メニューの子は浮動小数点attrを持っていて、コンテンツよりも大きければ、それは単に突き出ているだけです。これはコードをロードすることによって見ることができます。私は相対的な位置、テーブルのセルで遊ぶのが好きではありません。そして、私が浮動小数点を設定した場合：ラッパー上に何らかの理由で実際にはマークアップ全体がバグします。これを行う方法は他にありますか？メニューdivの親divの自動高さ...どのように？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <style> 
      div.wrap{ 
       background-color:grey; 
       padding:5px; 
      } 
      div.left{ 
       background-color:orange; 
       float:left; 
       width:200px; 
       height:400px; 
      } 
      div.content{ 
       margin-left:200px; 
       height:200px; 
       background-color:white; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="wrap"> 
      <div class="left"> 
       Menu 
      </div> 
      <div class="content"> 
       Text 
      </div> 
     </div> 
    </body> 
</html>

出典

2012-05-08 Anonymous

div.wrap内側：

<div class="clear"></div>

<style>内側：

div.clear{ 
    clear:both; 
}

出典

2012-05-08 20:49:13 element119

マジック！それは働いています、ありがとう：D – Anonymous

あなたのために働いてうれしい！一般的なルールとして、フローティング要素は親要素のディメンションでうまく動作しません。だから、 'clear：both 'のdivは、ブラウザが親要素を終わらせる場所を定義するので、それを修正します。あなたが将来知っているように、このテクニックは "clearfix"と呼ばれています。 – element119

ありがとう、私は注意します^。^ – Anonymous

メニューdivの親divの自動高さ...どのように？

答えて

関連する問題