Clearfix가 div의 높이를 내용에 맞게 확장하지 않음

두 개의 하위 요소가 포함 된 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

Safari/Mac 및 Chrome/Mac에서 테스트 중 – Nyxynyx

Safari/Mac의 스크린 샷으로 업데이트 됨 – Nyxynyx

왜 당신은 표시가없는 수행하십시오 #organizer_email_container에 아무도?

나에게 잘 보이는 : http://cl.ly/1c361c0G3r0G1U0p3J0P는

당신은 아닌 텍스트 영역의 클래스로, 당신의 class="clearfix" 부모 컨테이너에 넣어해야합니다.

출처

2012-01-17 00:25:09

사용자가 버튼을 눌렀을 때 div가 표시 될 때까지'# organizer_email_container'가 처음에 숨겨져 있습니다. 어쩌면 3'organizer_email_address' divs가 충분하지 않습니다. 10 줄을 써서 2 줄의 이메일을 가져 와서 'textarea'를 아래쪽으로 밀어 넣으십시오. – Nyxynyx

예, 이제 부모 div에서 작동합니다. – Nyxynyx

Clearfix가 div의 높이를 내용에 맞게 확장하지 않음

답변

관련 문제