CSS - 相对定位的父div不会延伸到绝对子div高度

Question

我整个上午一直在谷歌上搜索它似乎无法让它工作:

我有一个具有相对定位的父DIV和一个内部的两列子DIV设置,两者都定位为Absolute.我需要父DIV的高度来扩展内部DIV的内容.

我试过在#content的结束标记之前放一个.clearfix类型的位,但我没有浮动任何东西.我也尝试将一个float属性添加到#content div中无济于事.任何人都可以指出我在这里正确的方向.很明显,我错过了嵌套显示如何相互影响的东西.

CSS:

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol {
    width: 500px;
    position: absolute;
}

#rightcol {
    width: 270px;
    position: absolute;
    left: 500px;
    margin-left: 10px;
    text-align: center;
}

HTML:

<div id="content">
    <div id="leftcol">
        <p>Lorem Ipsum</p>
    </div><!-- /leftcol -->
    <div id="rightcol">
        <img src="images/thumb1.jpg">
        <img src="images/thumb2.jpg">
    </div><!-- /rightcol -->
    <br style="clear:both;">
</div><!-- /content -->

Answer 1

力量的黑暗面是通往许多人认为不自然的能力的途径.

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});?

Answer 2

清理工作,但我有奇怪的结果.然后我发现了一个帖子,使所有浏览器都更容易和完美.

将您的子div设置为float:left/right.然后在父级上加上"overflow:hidden".因为您没有指定高度,所以它将完美地包裹到子元素.我现在还没有使用清理.

Answer 3

您不需要position: absolute执行此任务。

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol { 
    width: 500px;
    float: left;
}

#rightcol {
    width: 270px;
    position: relative;
    margin-left: 510px;
    text-align: center;
}