CSS親子の高さ

Question

これらのコードスニペットに問題があります：

CSS：

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

左の高さは80px、右の高さは150pxです。私はこのことをこのように見せたいです： http://img408.imageshack.us/img408/9978/dream.th jpg IEの上記のスクリーンショットは、IEを使用すると、これらのスニペットが完全に機能します。しかし、他のブラウザー（オペラ、FF、Safari、Chrome）を使用すると、次のようになります。 http://img408.imageshack.us/img408/869/fact.th jpg

これはクールではありません<！>＃8230;親（#wrapper）要素の高さで2つの子の高さを大きくしたい。

Answer 1

これはIEのバグです。

フロートを含むは、この動作が表示される理由を説明していますが、フロートを含める方法は、マークアップを追加するよりも優れたソリューションを提供します。

Answer 2

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

Answer 3

Davidさん、簡単な回答をありがとう。あなたが書いたすべてのコンテンツ（2つのリンク）を読んでいませんが、2番目のリンクで解決策を見つけました。 <！> quot; clear：both; <！> quot;を追加したdivを追加しました。コンテナに、そしてそれは働いています！ありがとう。 マットボール：ありがとう、でもこのことを動的に成長させたいです

Answer 4

2つのdiv（s）が固定の高さ（またはその高さが<！> lt;含まれるdiv（s）の最大高さよりも低い）のコンテナに浮かぶ場合、コンテナはピクセルの行で折りたたまれますフローティングdivがコンテナをオーバーフローします。

コンテナに2つのdivが含まれるようにするには、コンテナを閉じる前に両方のフロートをクリアする必要があります！ つまり... ...

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

Answer 5

親のオーバーフロースタイルを表示以外に設定するだけで、子コンテンツをラップします。

Answer 6

私が見つけた最良の解決策は、上記のRodrigo <！>＃8217; sに似ていますが、コンテンツにスペース文字を必要としません（したがって、フォントサイズを指定する必要もありません） ）。クラスにすると、ラッパーだけでなく、任意のコンテナブロックに適用できます。 （また、私はそれを<！>＃8217; IDのスタイルを設定しないのが最善ですが、それは<！>＃8217;別の質問です。）

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}