Clearfix 没有使 div 的高度扩展以适应内容

Question

我有一个包含 2 个子元素的 div。第一个 div 在用户交互中通过 jQuery 动态添加内容。第二个是一个文本区域，它有一个问题没有包含在其父 div 中。

<div class="organizer_email_address">something@gmail.com</div> 在用户选择一些选项并单击按钮后通过 jQuery 添加。

我尝试了 clearfix 方法，但它不会导致父 div 完全包含第二个孩子。请看看是哪里出了问题，谢谢！

HTML

<div id="organizer_email_container">
    <div id="organizer_email_addresses_container">
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</div>
        <div class="organizer_email_address">something@gmail.com</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%;
}

Answer 1

为什么 #organizer_email_container 上有 display:none？

我觉得不错：http://cl.ly/1c361c0G3r0G1U0p3J0P

-

您应该将 class="clearfix" 放在父容器中，而不是作为文本区域的类。