내부 Div가있는 Div는 내용에 맞지 않습니다.

Question

<div style="background-color:black"> 
    <div style="float:right"> 
     Test message 
    </div> 
<div> 

상위 div가 내용에 적합하지 않아 'Test message'에 흰색 배경이 표시됩니다.

어떻게 컨텐츠에 맞게 div를 만들 수 있습니까? (테이블, 또는 디스플레이 사용하지 않고 : 그것은 IE에서 지원되지 않는 때문에 테이블)

Answer 1

당신은이 작업을 수행 할 수 있습니다 여기 참조 :

<div style="background-color:black; overflow: auto;"> 
    <div style="float:right"> 
     Test message 
    </div> 
<div> 

그것은이 clearfix :

을 할 수있는 청소기 방법

Answer 2

일반적인 솔루션은 플로트를 지우고 요소를 래핑하는 부모 요소를 야기하는 <br style="clear: both;"> 후 부동 요소를 넣어하는 것입니다.

<div style="background-color:black"> 
    <div style="float:right"> 
     Test message 
    </div> 
    <br style="clear: both;"> 
<div> 

문제 외에도 아직 스타일을 별도의 CSS 파일에 두는 것이 좋습니다.

Answer 3

이와 비슷한 소리는 이전 clearfix 문제입니다. 이것은 레이아웃을 위해 css와 float를 사용할 때 거의 필수적입니다. 간단한 설명과 수정 방법은 http://www.webtoolkit.info/css-clearfix.html을 참조하십시오. 아니면 더 깊이보기를 위해, http://www.positioniseverything.net/easyclearing.html이