Dlaczego nakładają się moje elementy div?

Question

Próbuję utworzyć div elementu nadrzędnego w elemencie listy, który zawiera dwa elementy div dla dzieci po lewej i prawej stronie. Lewa zawiera obraz, a prawa zawierać dwa dodatkowe elementy div zawierające tekst i znacznik czasu.

Nie mogę uzyskać lewego i prawego elementu div do wyświetlenia bez zachodzenia na siebie.

Moje HTML wygląda następująco:

<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> 

Spójrz na tego jsfiddle

Czego mi brakuje?

Answer 1

Są one nakładające się, ponieważ pływasz w div, ale nie czyścisz float.

Użyj metody clearfix, aby usunąć float. Dodaj klasę container do div pojemnika i używać tej CSS:

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; 
} 

Zauważysz również, że usunęliśmy Twojego inline CSS. Ułatwia to utrzymanie kodu.

Answer 2

Zastanawiam się, czy to jest to, czego szukasz: jsfiddle

dodałem w img{display:block;} jako obrazy pochodzą z jakiegoś ukrytego wyściółką, która rzuca elemets dół.

Answer 3

Twoja miniatura ustawia obraz na określoną wysokość 41 pikseli. Zmień rozmiar obrazu, zmień rozmiar div lub ustaw przepełnienie zewnętrznego div.