如何獲得父級div高度，如果其子級具有絕對位置

在我的代碼中，我有一個父級div，裏面有兩個子級div。第一個子div是float:left，第二個div是position:absolute。我的問題是，我想成長父母div高度汽車的孩子。如何獲得父級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來它覆蓋第一一。看到這個圖片：

Image showing how Parent div does not expand correctly.

最重要的是，我不希望通過JavaScript或jQuery來做到這一點。我只想用CSS修復它。那可能嗎？如果您有任何問題，請告訴我。這裏是小提琴鏈接：http://jsfiddle.net/sarfarazdesigner99/fpMyV/

在此先感謝！

來源

2013-01-23 The Mechanic

絕對格是某種具有幾乎沒有浮動的div與其父項的任何連接。父母不能跟蹤絕對div的高度。我總是用jQuery修復這個問題。但是如果有人知道解決方法，我很感興趣。 – Ladineko

根據你的CSS'.leftalign'不是父div，因爲你沒有指定'position：relative'規則就可以了。 –

@ A.K它不影響'位置：相對'你可以在小提琴中看到並給它，但它不會影響 –

從我的知識 - 你不能這樣做與位置：絕對。

入住這fiddle -

變化==>

UL和李對div的
overflow:hidden;height:auto;

來源

2013-01-23 12:15:15

它的工作，但我必須改變UL LI的DIV –

如何獲得父級div高度，如果其子級具有絕對位置

回答

相關問題