상위 div가 하위 요소의 높이를 자동으로 상속하지 않음

Question

3 열 웹 사이트를 디자인 중이며 왼쪽 열에 프로필 사진과 함께 표시 할 특정 인물의 정보를 원합니다. 평균 시간 동안, 나는 HTML로 가져 가고 있는데, 나는 왼쪽 열의 코드를 성공적으로 설계했다. 이제 왼쪽 열에 하위 부서를 만들려고합니다. 각 부서는 이름과 계정 정보가있는 사람의 사진을 반영합니다.

#column_left{ 
    display: inline; 
    float: left; 
    margin-left: 5px; 
} 
#col1 #sub-div{ 
    width:100%; 
    margin:auto; 
    border-top:1px #333 solid; 
    border-bottom:1px #333 solid; 
} 
#col1 #sub-div #div-img { float:left; display:inline; width: 40px; height: 40px; 
    } 
#col1 #sub-div #div-info { float:left; display:inline; width:auto; height:auto; padding: 2px; } 

지금 문제는 심지어 두 개의 div의 (DIV-IMG와 DIV-정보가) 하위 사업부에서, 그래서 하위 사업부의 높이가 자식 된 div의 높이에 따라 변경해야한다는 것입니다. 하지만 불행히도 하위 div는 올바른 순서로 정렬되지만 parent div는 # sub-div의 CSS 코드에서 언급하지 않는 한 아무런 높이가 없습니다.

아무도 부모가 자식 요소의 높이를 상속하지 않는 이유는 무엇입니까? 나는 틀린 곳입니까?

Answer 1

수레를 치울 필요가 있습니다. 무슨 뜻인지 확인하려면 왼쪽 사업부의 바닥에이 줄을 추가

<div style="clear: both"></div> 

수레가 청산이 필요한 이유에 대한 자세한 내용은 this article를 참조하십시오. The answers to this question은 더 많은 제거 솔루션을 제공합니다.