html - DIV を浮動子の高さ (浮動列) に一致させながら、子要素が側面に突き出るようにする方法

Question

3 つのフローティング div を含む div に基づいて、3 列のレイアウトを設計しています。

問題は、コンテナーの div が意図したとおりに列の高さと一致しないことです。コンテンツがまったくないかのように動作するため、3 つの列が垂直に突き出ています。

これを修正するために、overflow:hidden を試してみましたが、うまくいきましたが、私のデザインには左側に突き出た div があり、この属性は何も突き出さないため、台無しになりました。

高さの問題を解決するより良い方法はありますか? ありがとう。

Answer 1

<div style="clear:both;"></div>通常、すべての子の後に権利を投げることで、コンテナの高さを子の最後まで伸ばすことができます..このように。

<div id="container">
    <div class="child0"></div>
    <div class="child1"></div>
    <div class="child2"></div>

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

それがコミュニティによってハッキングと見なされているかどうかはわかりません。でもたまに使います。また、div を使用せず、<hr>そのスタイルも適用する人を見てきました。

Answer 2

clearfix クラスを使用してください - これは仕事をするはずです:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

http://jsfiddle.net/YyMjJ/1/を確認してください

Answer 3

質問を正しく理解していると仮定すると、クリア div を使用できます。

   <div id="dre">
        <div class="float" style="height:100px"></div>
        <div class="float" style="height:200px"></div>
        <div class="float" style="height:30px"></div>
        <div id="clear"></div>
    </div>

こちらをご覧ください - http://jsfiddle.net/C7FCC/