css - 无法让父 div 与子 div 3 childs 跨越

Question

绿色盒子应该在蓝色盒子里。但事实并非如此。有人可以告诉我为什么以及如何解决它吗？” http://jsfiddle.net/6MN8R

--------原始问题------------

这边没有扩展到 .content 子 div...我经历过溢出，我正在清除最后一个 child 末尾的 div 任何人都可以帮助我吗？

Main 是父 div，子 div 从该 div 产生。

当我改变 main 中的高度时它工作正常但我需要动态工作

#main {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 90%;
    position: relative;
    background-image: url('../images/top.jpg');
    background-repeat: repeat-x;
}

#main .leftside {
    float: left;
    width: 47px;
    height: 100%;
    background-image: url('../images/left.jpg');
    background-repeat: repeat-y;
}

#main .rightside {
    float: right;
    height: 100%;
    background-image: url('../images/right.jpg');
    background-repeat: repeat-y;
}

#main .content {
    margin-right: auto;
    margin-left: auto;
    float: left;
    top: 36px;
    width: 92%;
    position: relative;
    background-color: #FFFFFF;
}

.clear {
    clear: both;
 }

这是HTML代码

<div id='main'>
    <div class='leftside'>
        <img src='images/tleft.jpg' alt='' />
    </div>
    <div class='rightside'>
        <img src='images/tright.jpg' alt='' />
    </div>
    <div class='content'>
<div>Test</div>
<div>Test</div>
<div>Test</div>
    </div>
    <div class='clear'></div>
</div>

Answer 1

您的内容 div 上有 position: relative。只需删除它。我对您的 css 和 html 做了一些其他的小改动 - 替换了一些图像并使内容适合左右 div，但我认为这无论如何都是您的设计意图。

http://jsfiddle.net/6MN8R/1/

您可能会问自己为什么会这样。您将 position relative 和 top 设置为 36px。忘记所有的 float 、侧面 div 和所有其他废话。当您将某物设置为相对并使用顶部、左侧、右侧或底部重新定位它时，它可以移出其父容器。它仍然会影响父容器的大小，但不会影响其位置。 content div 导致父容器增长，但位置 top 导致它也向下移动并移出 main div。