外側のdivを自動的にフローティングコンテンツと同じ高さにします

外側divにdiv浮いているそのs を包むために黒のアウターが欲しい。自動的にコンテンツの高さ（たとえば、フローティングs）にしたいので、id style='height: 200pxでを使用したくありません。divouterdivdiv

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

これを達成する方法は？

outerdivのCSSをこれに設定できます

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

最後にで要素を追加してこれを行うこともできclear: bothます。これは、JS（適切なソリューションではない）または:afterCSS疑似要素（古いIEでは広くサポートされていない）を使用して通常どおり追加できます。

問題は、コンテナが自然に拡大して浮き子を含むことができないことです。最初の例を使用すると警告が表示されます。親要素の外側に子要素がある場合、それらは非表示になります。プロパティ値として「auto」を使用することもできますが、これにより、要素が外側に表示された場合にスクロールバーが呼び出されます。

親コンテナをフローティングにすることもできますが、デザインによっては、これが不可能/困難な場合があります。

まず、インラインではなく、外部CSSファイルでCSSスタイルを設定することを強くお勧めします。メンテナンスがはるかに簡単で、クラスを使用して再利用可能にすることができます。

「末尾にclear：bothを指定して要素を追加する」というAlexの回答（およびGarretのclearfix）を回避するには、次のようにします。

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

これは機能します（ただし、ご覧のとおり、インラインCSSはそれほどきれいではありません）。

http://www.sitepoint.com/simple-clearing-of-floats/で説明されているように、自動閉鎖フロートを試すことをお勧めします

したがって、おそらくアレックスが言ったようにoverflow: auto（通常は機能する）またはのいずれかを試してくださいoverflow: hidden。

一部の人が私を嫌うことは知っdisplay:table-cellていますが、この場合は助けになることがわかりました。

それは本当にきれいです。

まずwidth=300px、使用しないのはCSSではwidth: 300px;なくタグの属性設定です。代わりに使用してください。

にclearfixテクニックを適用することをお勧めし#outerdivます。Clearfixは2つのフローティングdivをクリアするための一般的なソリューションです。したがって、親divは2つのフローティングdivに対応するように拡張されます。

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

これは、状況の例と、Clearfixがそれを解決するために行うことの例です。

jQueryを使用します。

親の高さ=子のオフセット高さを設定します。

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

使用する clear: both;

私はこれを理解しようと一週間以上費やしました！