1

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

The following is a code that I wrote. The problem is that in the resulting page the wrapper div does not seems to container the nested divs.

4

5 回答 5

3

添加“溢出：隐藏；” 根据您的包装器的定义。

于 2012-04-30T12:07:12.687 回答
2

由于您的 body 元素 , #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，所以它们将被该方法切断。第三种选择是在容器末尾添加 a ，但这只是一种讨厌的方法:)。

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

于 2012-04-30T12:07:52.843 回答
1

try something like this position: absolute;

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

         }
于 2012-04-30T12:58:33.167 回答
1

你给溢出：隐藏在你的#wrapper

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


}

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

于 2012-04-30T12:10:32.153 回答
1

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

于 2012-04-30T12:11:51.810 回答