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

У меня есть div, который содержит 2 дочерних элемента. 1-й div имеет динамическое добавление контента через jQuery при взаимодействии с пользователем. Второй - это текстовая область, в которой проблема не содержится в ее родительском div.Clearfix не делает высоту div расширяемой, чтобы соответствовать содержанию

<div class="organizer_email_address">[email protected]</div> добавлен через jQuery после выбора пользователем некоторых параметров и нажатия кнопки.

Я пробовал метод clearfix, но это не приводит к тому, что родительский div полностью содержит 2-го ребенка. Пожалуйста, посмотрите и посмотрите, что пошло не так, спасибо!

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

Я тестирую его на Safari/Mac и Chrome/Mac – Nyxynyx

Обновлено сообщение с скриншотом из Safari/Mac – Nyxynyx

Почему у вас есть дисплей: нет на #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

Да, теперь он работает на родительском div. – Nyxynyx

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

ответ

Смежные вопросы