Question

http://jsfiddle.net/bobbyfrancisjoseph/2EfLz/1/

以下是我写的代码。问题是，在结果页面中，包装器div似乎不会容纳嵌套的div。

Answer 1

添加“overflow：hidden;”你的包装器的定义。

Answer 2

由于您的正文元素#left-container，#right-container正在浮动，因此它们将从常规内容流中删除，因此您需要一个“clearfix”来正确包含浮动元素。你可以用两种方式做到这一点：

一，通过使用clearfix，如下所示，我的首选方法，因为它的内联，并没有弄乱可能溢出容器的绝对定位元素：

#wrapper:before, #wrapper:after {
    content:"";
    display:table;
}

#wrapper:after {
    clear:both;
}

#wrapper {
    *zoom:1; /* ie7 hasLayout fix */
}

或者在您的overflow:hidden容器上使用#wrapper，这是一种我尝试避免的方法，因为您可能已经定位了可能会使用positition:absolute从容器中溢出的元素，因此他们将用这种方法切断。第三种选择是在容器的末尾添加一个，但这只是一种icky方法:)。

使用第一个（和我首选的）方法进行演示http://jsfiddle.net/2EfLz/2/

Answer 3

你在 #wrapper

中提供溢出：隐藏

#wrapper
{
    margin:0 auto;
    position:relative;
    background-color:#999;
    width:960px;
    border:dashed #006 thick;
    overflow:hidden;


}

http://jsfiddle.net/2EfLz/3/

Answer 4

在包装器样式中使用overflow:hidden;。

Answer 5

尝试类似位置：绝对;

的内容

            #wrapper
           {
            margin:0 auto;
            position: absolute;
            background-color:#999;
            width:960px;
            border:dashed #006 thick;

         }

包装器不覆盖嵌套的div

5 个答案: