为什么包装器div不包装一个和两个div？ （在Firefox浏览器中） [英] Why doesn't the wrapper div wrap the one and two divs? (In Firefox browser)
本文介绍了为什么包装器div不包装一个和两个div？ （在Firefox浏览器中）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么包装器div不包装一个和两个div？ （在Firefox浏览器中）
Why doesn't the wrapper div wrap the one and two divs? (In Firefox browser)
<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>
推荐答案
因为包装div中技术上没有内容。所有元素的位置都是绝对的（相对于包装者而言），因此没有内容可以达到任何高度。
Because there is technically no content in the wrapper div. All its elements have been positioned absolutely (relative to the wrapper mind you) so there is no content to get any height from.
如果您将获得相同的效果
You'd get the same effect if you floated both the child divs.
您可以尝试将 overflow：hidden 放在包装器上，为包装器明确指定高度或给它一些真实的内容。
You could try putting overflow: hidden on wrapper, giving wrapper an explicit height or giving it some "real" content.
这篇关于为什么包装器div不包装一个和两个div？ （在Firefox浏览器中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
