web-dev-qa-db-ja.com

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

外側のdivが必要です。これは、そのdivsをフローティングでラップするために黒です。使用したくないstyle='height: 200pxdivにouterdiv idを付けて、コンテンツの高さ（たとえば、フローティングdivs）に自動的に設定するようにします。

<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>

これを達成する方法は？

csshtmlcss-float
91
Jase Whatson

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

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

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

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

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

157
alex

まず、インラインで行うのではなく、外部CSSファイルでCSSスタイリングを行うことを強くお勧めします。保守がはるかに簡単で、クラスを使用するとより再利用可能になります。

「明確な要素を最後に追加する：両方」というアレックスの答え（＆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はそれほどきれいではありません）。

14
Lycana

http://www.sitepoint.com/simple-clearing-of-floats/ で詳細に説明されているように、自己閉鎖フロートを試してみてください。

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

7
DarkWulf

一部の人が私を嫌うことは知っていますが、私はdisplay:table-cellこの場合に役立ちます。

本当にきれいです。

4
Nande

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

#outerdivにclearfixテクニックを適用することをお勧めします。 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が行うことを示します。

3
Garrett

JQueryを使用します。

親の高さ=子のoffsetHeightを設定します。

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

つかいます clear: both;

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

0
Ronan D. Connolly