0

绿色盒子应该在蓝色盒子里。但事实并非如此。有人可以告诉我为什么以及如何解决它吗？” 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>
4

1 回答 1

0

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

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

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

于 2013-01-30T17:46:42.900 回答