なぜラッパーdivは1つと2つのdivを折り返しませんか？（Firefoxブラウザで）

ラッパーが1つと2つのdivを折り返して表示しないのはなぜですか？（Firefoxブラウザで）なぜラッパーdivは1つと2つのdivを折り返しませんか？（Firefoxブラウザで）

<html> 
<head> 
<style> 
#wrapper {position:relative; background:red; border:solid 1px green;} 
#one {position:absolute; top:0; left:10px; width:30%; border:solid 1px blue;} 
#two {position:absolute; top:0; right:0; width:30%; border:solid 1px yellow;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="one">111</div> 
<div id="two">222</div> 
</div> 
</body> 
</html>

出典

2009-09-02 Anonymous

希望の効果は何ですか？ラッパーdivが他の2つのdivをラップする方法を教えてください。 –

"ラップしない"という意味を指定できますか？ – Residuum

技術的には、ラッパーdivにコンテンツがないためです。すべての要素は絶対的に（ラッパーの心に相対して）配置されているので、高さを得るためのコンテンツはありません。

両方の子divをフローティングしても同じ効果が得られます。

overflow: hiddenをラッパーに配置して、ラッパーに明示的な高さを与えたり、いくつかの「本当の」コンテンツを与えたりすることができます。

出典

2009-09-02 13:59:10 cletus

なぜなら、それらは絶対的に配置されているからです。これはdivの流れからそれらを取り除きます。その結果、スペースを取るdivがないので、下の境界が崩壊します。あなたはdivをフロートときにも起こりますが、あなたはあなたのためにトリックを行う必要があります

#wrapper {position:relative; background:red; border:solid 1px green;} 
#one {float:left; width:30%; border:solid 1px blue;} 
#two {float:right; width:30%; border:solid 1px yellow;} 


<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div style="clear:both"></div> 
</div>

をラップするDIVを取得するためのソリューションが自分であるフロートとき。

出典

2009-09-02 13:59:31 Zoidberg

なぜラッパーdivは1つと2つのdivを折り返しませんか？ （Firefoxブラウザで）

答えて

関連する問題

なぜラッパーdivは1つと2つのdivを折り返しませんか？（Firefoxブラウザで）