28

私は 2 つの子を囲む div を持っています。子の周りに境界線と背景を配置したいのですが、子に合わせてサイズが変更されないため、div の高さは 0 です。

実際の例を次に示します: http://jsfiddle.net/VVZ7j/17/

赤い背景をずっと下げたいです。height:auto を試してみましたが、うまくいきませんでした。

ありとあらゆる助けをいただければ幸いです、ありがとう。

PS可能であれば、JavaScriptを使用したくありません。

4

5 に答える 5

62

これは、フロートを操作する際によくある問題です。いくつかの一般的な解決策がありますが、個人的な好みで注文しました (最善の方法を最初に)。

  1. ::after CSS 疑似要素を使用します。これは「clearfix」として知られており、IE8 以降で動作します。以前のバージョンの IE との互換性が必要な場合は、この回答が役立ちます。例。

    .parentelement::after {
    content: "";
    display: table;
    clear: both;
}

  2. 2 つの float を CSS 属性overflow: autoorを持つコンテナーに追加しますoverflow: hidden。ただし、この方法では問題が発生する可能性があります (たとえば、ツールチップが親要素の端に重なると、スクロールバーが表示されます)。例。

    <div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  3. 親要素に設定された高さを追加します。例。

    <div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  4. 親要素を float にします。例。

    <div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  5. float の後に div を追加しclear: bothます。例。

    <div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>
于 2012-06-10T13:21:46.713 に答える
5

overflow: hidden;#wrapに追加します。これはclear fix. これに関するドキュメントは次のとおりです。http://positioniseverything.net/easyclearing.html

LE: ブラウザーの互換性に応じて、これを実現する方法も複数あります。

  1. 親コンテナーに overflow: hidden を追加します。

#wrap { overflow: hidden; }

  1. 疑似要素を使用して追加しclear: bothます。

#wrap:after { clear: both; content: ""; display: table;}

  1. 最も一般的に使用される手法は、親コンテナーの最後の要素としてエクストラを追加することです。

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

not余分な HTML マークアップを取得するため、3 番目のものを使用することをお勧めします。

于 2012-06-10T13:19:45.657 に答える
3

に追加overflow: hiddenしてみてください#wrap div。

于 2012-06-10T13:21:43.453 に答える
2

Nicolas Gallagher のこの「micro-clearfix」ソリューションを使い始めました。

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

それを CSS とフローティング要素に追加するだけで、「cf」クラスをフローティング子を持つ要素のラッパーに追加できます。

于 2012-06-10T13:32:51.727 に答える
0

外側の div を閉じる前に、スタイル clear:bothでもう 1 つ div を追加するだけです。つまり、ここで「wrap」

--サンプルコード--

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>
于 2012-06-10T13:26:04.230 に答える