[css] CSS 컨테이너 div가 높이를 얻지 못함

Program / 글쓴이

내 컨테이너 div가 자식 높이의 최대 높이를 얻길 원합니다. 아이 div의 키가 얼마인지 모른 채 . 나는 JSFiddle 에서 시도하고 있었다 . 컨테이너 div가 빨간색입니다. 표시되지 않습니다. 왜?

답변

다음 속성을 추가합니다.

.c{
    ...
    overflow: hidden;
}

이렇게하면 컨테이너가 플로팅 요소에 관계없이 그 안에있는 모든 요소의 높이를 준수하게됩니다.
http://jsfiddle.net/gtdfY/3/

최신 정보

최근에 저는이 트릭이 필요하지만 오버플로를 표시 할 수있는 프로젝트를 진행하고 있었으므로 대신 가상 요소를 사용하여 플로트를 지우고 모든 요소에서 오버플로를 허용하면서 효과적으로 동일한 효과를 얻을 수 있습니다.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

답변

당신은 아이들이 컨테이너 앞에 “떠 다니는”것을 의미합니다. 정확한 높이를 얻으려면 플로트를 “클리어”해야합니다.

div style = “clear : both”는 플로팅을 지우고 컨테이너에 올바른 높이를 제공합니다. 플로트에 대한 자세한 내용은 http://css.maxdesign.com.au/floatutorial/clear.htm 을 참조 하십시오 .

예.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

답변

그렇게 쉽지 않습니까?

.c {
    overflow: auto;
}

답변

이 지우기 div를 마지막 전에 삽입하십시오. </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

답변

가장 좋고 가장 방탄 솔루션을 추가하는 것입니다 ::before및 ::after컨테이너에 pseudoelements. 예를 들어 다음과 같은 목록이 있다면

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

그리고 목록의 모든 요소에는 float:left속성 이 있으므로 CSS에 추가해야합니다.

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

또는 display:inline-block;속성을 시도한 다음 clearfix를 추가 할 필요가 없습니다.

답변