Clearfix не увеличивает высоту div, чтобы соответствовать содержимому - PullRequest
Новая
       31

Clearfix не увеличивает высоту div, чтобы соответствовать содержимому

0 голосов
/ 17 января 2012

У меня есть div, который содержит 2 дочерних элемента. 1-й 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%;
}

enter image description here

1 Ответ

0 голосов
/ 17 января 2012

Почему у вас есть дисплей: нет на #organizer_email_container?

Выглядит хорошо для меня: http://cl.ly/1c361c0G3r0G1U0p3J0P

-

Вы должны поставить свой class="clearfix"в родительском контейнере, а не как класс вашей текстовой области.

...