1

在我的代码中，我有一个父 div，在其中我有两个子 div。第一个子 div 是float:left，第二个 div 有position:absolute. 我的问题是我想通过它的孩子来增加父 div 高度自动。

这是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 重叠。看这张图片：

显示父 div 未正确展开的图像。

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

提前致谢！

4

1 回答 1

1

据我所知 - 你不能用 position:absolute 做到这一点。

检查这个小提琴-

变化是==>

  • ul 和 li 到 Div 的
  • overflow:hidden;height:auto;
于 2013-01-23T12:15:15.663 回答