FloatがオーバーラップしているDivを作成する

私は2つのdiv（1つは他のものの中にあります）を持っていて、内部を "left"にフロートさせるときに少し問題があります。問題は、内側のdivの内側にテキストが収まるように、外側のdivがその高さを拡大しないことです。これはおそらくかなり混乱しているので、私はいくつかのコードで説明しようとします。FloatがオーバーラップしているDivを作成する

HTML：

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS：

#div2 { 
    float: left; 
    width: 10px; 
}

私はむしろこれを試験したとき、私はこれをテストする機会を持っていなかったとして、実際に私の問題を示していることを願っています。私の実際のコードには、必要に応じてこれらのプロパティを追加するプロパティがあります。

出典

2009-06-21 PF1

クリアフィックスを使用する必要があります。あなたのフロートされたdivの後、および含まれているdivの中に以下を挿入してください。

<div class="clear"></div>

そして、次のスタイルを追加します。

.clear { clear:both; }

例：

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

出典

2009-06-21 03:49:03 Sampson

ありがとうございました。ジョナサン：これは素晴らしい機能でした。 – PF1

あなた天才:)その仕事 –

これは修正ではありません。それは明らかです。フローティングをクリアするだけです:) –

（第3時間今日:-)）外側のdivオーバーフローを与える：隠されました;
と幅。あなたがHTMLに追加のマークアップを追加したり、外側のdivに幅を追加したくない場合は

出典

2009-06-21 03:49:55

本当ですか？そうですね、本当に申し訳ありません。他の人が同じ問題を呼んでいることをよりよく表現するために、検索クエリを変更する必要があると私は思います。 – PF1

...またはauto –

高さが高くなるように要素に幅を追加すると、CSSコードは読みにくくなりますが、それが合理的な解決策であるかどうかは疑問です。ズーム：1のソリューションは私が推測するように見えるかもしれませんが、おそらく有効なw3c cssではありません。オーバーフロー：素晴らしいソリューションでも隠されていますが、コンテンツを隠すオーバーフローではなく、要素のサイズを大きくするためにも使用されるため、CSSを読みにくくしています。 – Michiel

は、使用することができます：たぶん便利

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

出典

2009-06-21 11:45:12 Emily

私はオーバーフローと考えました：隠されたIE6でも働いた？ – alex

IE6の浮動小数点数をクリアするには、hasLayoutを呼び出す必要があります。これは、要素に位置、浮動小数点、表示、幅、高さ、またはズームを与えることによって行われます。幅や高さを与えることは、hasLayoutを呼び出す最も一般的な方法ですが、寸法を指定したくない場合や、ズームが最も透明な場合があります。詳細は、hasLayout.netを参照してください。 – Emily

Ah - 表示を追加します：ブロックは、一般に、浮動要素を含むすべての要素に追加します。 – alex

をもよく知っているclearfixコードがあることに注意することpositioniseverythingから入手してください。これはこの問題のために特別に書かれており、おそらく最も堅牢で、どの状況でも適用するのが最も簡単です。次のようにCSSが見えます：

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

次んでしょうあなたの状況でそれを使用するためには：

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

出典

2009-06-21 17:47:18 Michiel

身長：1％が私の全問題を解決しました。しかし、なぜか分からない。尾に2つ以上の非浮動要素がある一連の浮動要素のコンテキストで、その動作を説明できますか？ – Emanegux

ソリューションは、上記の動作するはずですが、私はそれが1があることを指摘する価値の姿私はまだ考えられていない（このスレッドで）魔法のトリック。

ちょうどフロート＃div1が残っています。親要素を浮動させると、自動的に子要素がクリアされます。フローティングスタックのレイアウト全体を構築し、最終的に最終的な1つを明確にすることができ、それはかなり信頼できるでしょう。

出典

2009-06-22 08:26:18

残念ながら浮動小数点は非常に習慣性です。それらを控えめに使用し、奇妙なオーバーフローを振りかけるのがベストです。 – GlennG

FloatがオーバーラップしているDivを作成する

答えて

関連する問題