Clearfix不會使div的高度擴大以適應內容

我有一個包含2個子元素的div。第一個div有通過jQuery動態添加的用戶交互內容。第二個是一個文本區域，其問題未包含在其父div中。Clearfix不會使div的高度擴大以適應內容

<div class="organizer_email_address">[email protected]</div>是在用戶選擇某些選項並點擊按鈕後通過jQuery添加的。

我嘗試了clearfix方法，但它不會導致父div完全包含第二個孩子。請看看，看看出了什麼問題，謝謝！

HTML

<div id="organizer_email_container"> 
    <div id="organizer_email_addresses_container"> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
     <div class="organizer_email_address">[email protected]</div> 
    </div> 
    <textarea id="organizer_email_template" class="clearfix">Some text </textarea> 
</div>

CSS

#organizer_email_container { 
    width: 800px; 
    min-height: 130px; 
    height: auto; 
    margin: 25px auto; 
    padding: 25px; 
    background: #FAFAFA;  
    display: none; 
} 

#organizer_email_template { 
    width: 500px; 
    height: 120px; 
    background: #F6F6F6; 
    color: #666; 
    font-size: 13px; 
    padding: 7px 10px; 
    border: 1px solid #B9B9B9; 
    border-top-color: #A4A4A4; 
    -moz-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17); 
    -ms-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17); 
    -webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17); 
    box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17); 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    float: left; 
    clear: both; 
} 

.organizer_email_address { 
    background-color: #F3F7FD; 
    border: solid 1px #BBD8FB; 
    vertical-align: middle; 
    font-size: 12px; 
    color: #2A2A2A; 
    padding: 2px 5px 2px 7px; 
    margin: 1px; 
    float: left; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

enter image description here

來源

2012-01-17 Nyxynyx

據我所見，父div正確地展開以顯示第二個孩子（FF以及Chrome）。你正在測試哪個瀏覽器？ – techfoobar 2012-01-17 00:28:21

我正在Safari/Mac和Chrome/Mac上測試它 – Nyxynyx 2012-01-17 00:35:08

Safari/Mac – Nyxynyx 2012-01-17 00:41:37

爲什麼你有一個顯示：無上#organizer_email_container？

看起來好像沒什麼問題：http://cl.ly/1c361c0G3r0G1U0p3J0P

你應該把你的class="clearfix"在父容器，而不是作爲一個階級的文本區域。

來源

2012-01-17 00:25:09

更新後的屏幕截圖＃＃organizer_email_container'最初是隱藏的，直到用戶點擊按鈕並導致div出現。也許3'organizer_email_address' divs是不夠的，試試10獲得2行電子郵件，這樣它會將'textarea'往下推 – Nyxynyx 2012-01-17 00:29:09

是的，它現在可以在父div上工作。 – Nyxynyx 2012-01-17 01:12:21

Clearfix不會使div的高度擴大以適應內容

回答

相關問題