Question

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

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

这方面没有扩展到.content孩子div ...我已经经历了溢出，我在最后一个孩子结束时清除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/

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

不能让父div与子div 3孩子跨越

1 个答案: