web-dev-qa-db-ja.com

浮かされた子をラップするdivの高さに合わせる方法

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

これが動作中の例です： http://jsfiddle.net/VVZ7j/17/

赤い背景をずっと下にしてほしい。 height：autoを試しましたが、うまくいきませんでした。

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

追伸可能であればJavaScriptを使いたくありません。

htmlcsscss-float
27
user1447371

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

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

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

  2. 2つのフロートをCSS属性overflow: autoまたは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. 親要素をフロートにします。 例 。

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

  5. フロートの後にclear: bothでdivを追加します。 例 。

    <div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>
60
jacktheripper

#wrapにoverflow: hidden;を追加します。これはclear fixです。これに関するいくつかのドキュメントがあります： http://positioniseverything.net/easyclearing.html

LE：ブラウザの互換性に応じて、これを実現する方法はいくつかあります。

  1. オーバーフローを追加：親コンテナーに非表示。

#wrap { overflow: hidden; }

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

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

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

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

追加のHTMLマークアップを取得するときは、notで3番目のものを使用することをお勧めします。

5
BebliucGeorge

overflow: hiddenを#wrapdivに追加してみてください。

3
Jim

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」クラスを、フロートされた子を持つ要素のラッパーに追加します。

2
jmbertucci

外側のdivを閉じる前にstyle clear：bothでdivを1つ追加するだけです。つまり、ここで「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>
0
vikrantx