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的高度扩大以适应内容

回答

相关问题