상위 요소 높이를 확장하지 않는 요소

나는 여러 요소를 넣을 컨테이너가 있는데, 컨테이너가 요소로 채워지는대로 컨테이너가 아래쪽으로 확장 될 것이라는 내 기대가있었습니다. 불행하게도, 이것은 사실이 아닙니다. 컨테이너의 가장자리에 떠있는 div가 있습니다. 나는 여러 가지 중단 태그를 사용하여 이것을 해결할 수 있었지만, 이것은 엉성한 해결책이었다.상위 요소 높이를 확장하지 않는 요소

아마 내 CSS가 올바르지 않지만 어디에서 알아낼 수 없습니다. 긴 선택 목록과 주요 설명 은은 흰색 상자에 있어야합니다.

여기에 Fiddle이 있습니다.

편집 : Uwe는 연구 수레로 나를 이끌었다. 플로트가 일반적인 플로우 레이아웃에서는 고려되지 않는다는 것을 발견했습니다. 그렇다면 어떻게 고칠 수 있습니까?

편집 2 : clearfix 솔루션을 발견했습니다.

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
* html .clearfix { 
    height: 1%; 
} /* Hides from IE-mac \*/ 
    .clearfix { 
     display: block; 
}

출처

2012-06-10 Jon

내가 추측 할 수있는 것은 'float' CSS 속성이이 문제의 원인이라는 것입니다. –

나는 clearfix 해결책을 발견했습니다. 내 편집 된 게시물을 참조하십시오. – Jon

@ 존 : 다른 clearfix 솔루션 (더 짧음) : http://nicolasgallagher.com/micro-clearfix-hack/ – Geert

플로트를 제거하는 방법은 다양합니다. 단순히 overflow: hidden;을 .main에 추가하면 문제가 해결됩니다.

실제로는 부모 div에 수정 사항을 적용하는 대신 문제를 일으키는 수레를 직접 지우는 것이 좋습니다. 실제로 대신 .bottom하기 위해 다음과 같은 속성을 추가하는 것이 좋습니다 :

.bottom { 
    clear: both; 
    overflow: hidden; 
}

clear: both는 .content의 수레을 삭제 처리한다.
overflow: hidden 당신은 또한 HTML 태그에 대한 class 속성 외에 id 속성을 사용하여 조사한다 .bottom

의 수레을 삭제 처리합니다.

출처

2012-06-10 09:59:01 Wex

상위 요소 높이를 확장하지 않는 요소

답변

관련 문제