외부 div를 플로팅 콘텐츠와 자동으로 같은 높이로 만듭니다.

나는 div그 div안에 떠 다니는 s 를 감싸기 위해 검정색 인 바깥 쪽을 원합니다 . 내가 사용하려는 해달라고 style='height: 200px에 div와 outerdiv내가 (예를 들어, 부동 자동으로 컨텐츠의 높이로 원하는 아이디 div들).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

이것을 달성하는 방법?

outerdiv의 CSS를 이것으로 설정할 수 있습니다.

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

끝에 요소를 추가하여이 작업을 수행 할 수도 있습니다 clear: both. 이것은 일반적으로 JS (좋은 솔루션이 아님) 또는 :afterCSS 의사 요소 (이전 IE에서 널리 지원되지 않음 )를 사용하여 추가 할 수 있습니다 .

문제는 컨테이너가 자연스럽게 떠 다니는 아이들을 포함하도록 확장되지 않는다는 것입니다. 첫 번째 예제를 사용할 때 경고를 받으십시오. 부모 요소 외부에 자식 요소가 있으면 숨겨집니다. 속성 값으로 'auto'를 사용할 수도 있지만 요소가 외부에 나타나면 스크롤바가 호출됩니다.

부모 컨테이너를 플로팅 할 수도 있지만 디자인에 따라 불가능하거나 어려울 수 있습니다.

첫째, CSS 스타일링을 인라인으로 수행하는 것보다 외부 CSS 파일에서 수행하는 것이 좋습니다. 유지 관리가 훨씬 쉽고 클래스를 사용하여 더 재사용 할 수 있습니다.

Alex의 대답 (& Garret의 clearfix)에서 "clear : both를 사용하여 끝에 요소 추가"를 수행하면 다음과 같이 할 수 있습니다.

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

이것은 작동합니다 (하지만 인라인 CSS는 그렇게 예쁘지 않습니다).

http://www.sitepoint.com/simple-clearing-of-floats/에 자세히 설명 된대로 자동 폐쇄 수레를 사용해 볼 수 있습니다 .

따라서 알렉스가 말했듯이 overflow: auto(일반적으로 작동 함) 또는을 시도해보십시오 overflow: hidden.

나는 어떤 사람들이 나를 미워할 것이라는 것을 알고 있지만, 나는 display:table-cell이 경우에 도움을 줄 수 있다는 것을 알게 되었습니다.

정말 깨끗합니다.

우선 width=300pxCSS가 width: 300px;아닌 태그의 속성 설정을 사용 하지 않고 대신 사용하세요.

에 clearfix기술을 적용하는 것이 좋습니다 #outerdiv. Clearfix 는 2 개의 부동 div를 지우는 일반적인 솔루션이므로 상위 div가 2 개의 부동 div를 수용하도록 확장됩니다.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

다음은 상황에 대한 예 와이를 해결하기 위해 Clearfix가 수행하는 작업입니다.

jQuery 사용 :

Parent Height = Child offsetHeight를 설정합니다.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

사용하다 clear: both;

나는 이것을 알아 내기 위해 일주일 이상을 보냈다!