1

私のコードには親 div があり、その中に 2 つの子 div があります。最初の子 div はfloat:leftで、2 番目の 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 とオーバーラップします。この画像を参照してください。

親 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 に答える