无法让父 div 与子 div 3 孩子跨越

Question

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

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

这边没有扩展到 .content 子div... 我已经经历了溢出，我正在清除最后一个孩子末尾的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

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

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

您可能会问自己为什么会发生这种情况。您将位置相对和顶部设置为 36px。忘记所有的浮标，侧面divs和所有其他废话。当您将某些内容设置为相对并用顶部、左侧、右侧或底部重新定位它时，它可以移出其父容器。它仍然影响父容器大小，但不会影响其位置。内容div 导致父容器增长，但位置顶部导致它也向下移动并移出主div。