如果其子项具有绝对位置，如何获得父div高度

Question

在我的代码中，我有一个父div，在里面我有两个子div。第一个子div为float:left，第二个div为position:absolute。我的问题是我想通过它的孩子来增长父div高度auto。

这是CSS：

#msgbody{
    margin-top:20px
}
.clr{clear:both}
.leftalign .imgbox{
    float:left;
}
.leftalign  .callout {
    position: absolute;
    left:70px;
    padding:10px;
    background-color: #EEEEEE;
    /* easy rounded corners for modern browsers */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.leftalign  .callout .notch {
    position: absolute;
    top: 10%;
    left: -10px;
    border-left:0;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #EEEEEE;
    border-top: 10px solid transparent;
    width: 0;
    height: 0;
    /* ie6 height fix */
    font-size: 0;
    line-height: 0;
     /* ie6 transparent fix */
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
}
.imgbox{
    border:1px solid #afc8c8;
    padding:3px;
    background:#fff;
    margin-right:10px;
}
.circle{
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
}
.subimgbox, .imgbox{
    display:block;
    width:46px;
    height:46px;
}
.subimgbox{
    overflow:hidden;
    background:#f3f3f3;
}

这是HTML：

<ul id="msgbodyli" class="ln">

    <li class="leftalign">
        <div class="imgbox circle">
            <div class="subimgbox circle"></div>
        </div>

        <div class="callout">
            Various browsers end up with jagged edges when you create these arrows.
            The safest angle to get your arrow to render without jaggies is 45%. This can be done by just making all the border-widths the same except for one being zero
            <b class="notch"></b>
        </div>
        <div class="clr"></div>
    </li>

    <li class="leftalign">
        <div class="imgbox circle">
            <div class="subimgbox circle"></div>
        </div>

        <div class="callout">
            Various browsers end up with jagged edges when you create these arrows.

            <b class="notch"></b>
        </div>
        <div class="clr"></div>
    </li>
</ul>    

因为父div位于'for循环'中，所以当下一个父div出现时，它与第一个div重叠。看到这张图片：

最重要的是，我不想通过Javascript或jQuery来实现。我想用CSS修复它。那可能吗？如果您有任何疑问，请告诉我。这是小提琴链接：http://jsfiddle.net/sarfarazdesigner99/fpMyV/

提前致谢！

Answer 1

据我所知 - 你不能用位置：绝对。

选中fiddle -

更改==＆gt;

• ul和li's to Div's
• overflow:hidden;height:auto;