Pourquoi le div wrapper n'emballe pas les divs un et deux? (Dans le navigateur Firefox)

Pourquoi le div wrapper n'emballe pas les un et deux divs? (Dans le navigateur Firefox)Pourquoi le div wrapper n'emballe pas les divs un et deux? (Dans le navigateur 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>

Source

2009-09-02 Anonymous

Quel est l'effet désiré? Comment voulez-vous que le wrapper div envelopper les deux autres divs? –

Pourriez-vous préciser ce que vous entendez par "ne pas emballer"? – Residuum

Parce qu'il n'y a techniquement aucun contenu dans la div wrapper. Tous ses éléments ont été positionnés de manière absolue (par rapport à l'encapsuleur) donc il n'y a pas de contenu pour obtenir une hauteur quelconque.

Vous obtiendriez le même effet si vous flottiez les divs enfants.

Vous pouvez essayer de mettre overflow: hidden sur wrapper, en donnant à wrapper une hauteur explicite ou en lui donnant du "vrai" contenu.

Source

2009-09-02 13:59:10 cletus

La raison en est que vous les avez positionnés absolument. Cela les éloigne du flux de la div et, par conséquent, il n'y a pas de div pour prendre de l'espace, de sorte que la frontière du bas s'effondre. Cela se produit également lorsque vous flottez les divs, mais quand vous flottez leur est la solution pour obtenir la div pour envelopper

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

Cela devrait faire l'affaire pour vous.

Source

2009-09-02 13:59:31 Zoidberg

Pourquoi le div wrapper n'emballe pas les divs un et deux? (Dans le navigateur Firefox)

Répondre

Questions connexes