내 div가 겹치는 이유는 무엇입니까?

Question

왼쪽 및 오른쪽에 두 개의 자식 div가 포함 된 목록 요소 내에 부모 div를 만들려고합니다. 왼쪽에는 이미지가 있고 오른쪽에는 텍스트와 타임 스탬프가 포함 된 두 개의 div가 추가됩니다.

왼쪽 및 오른쪽 div가 겹치지 않고 표시되도록 할 수 없습니다.

내 HTML은 다음과 같습니다

<ul class="activity-comments"> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 1</small> 
    </div> 
    <div> 
    <small>Posted 1 day ago</small> 
    </div> 
</div> 
</li> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 2</small> 
    </div> 
    <div> 
    <small>Posted 2 days ago</small> 
    </div> 
</div> 
</li> 
</ul> 

내가 놓친 거지이게 무슨 jsfiddle

에서보세요? 이미지가 아래로 elemets를 밀 친다 어떤 숨겨진 패딩 와서 jsfiddle

내가 img{display:block;} 추가 :이 당신을 위해 무엇을 찾고있는 경우

Answer 1

div를 플로팅하고 있지만 플로트를 지우지 않아 오버랩되어 있습니다.

clearfix 메서드를 사용하여 플로트를 지 웁니다. 이 CSS를 당신의 컨테이너 div에 클래스 container를 추가하고 사용

http://jsfiddle.net/57PQm/7/

.container { 
    border: solid 1px #ff0000; 
    zoom: 1; /* IE6&7 */ 
} 

.container:before, 
.container:after { 
    content: ""; 
    display: table; 
} 

.container:after { 
    clear: both; 
} 

또한 내가 인라인 CSS를 삭제 한 것을 알 수 있습니다. 이렇게하면 코드를 더 쉽게 유지 관리 할 수 ​​있습니다.

Answer 2

이 궁금하다.

Answer 3

썸네일이 그림을 41px의 특정 높이로 설정합니다. 사진 크기를 변경하거나 div 크기를 변경하거나 외부 div의 오버플로를 설정하십시오.