なぜdivが重なっていますか？

Question

私は、左右の2つの子divを含むリスト要素内に親divを作成しようとしています。左には画像が、右にはテキストとタイムスタンプを含むdivが2つ追加されます。

左右の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

を見てみましょうか？

Answer 1

divをフローティングしているが、フロートをクリアしていないため、重複しています。

clearfixメソッドを使用してフロートをクリアします。あなたのコンテナのdiv要素にクラスcontainerを追加し、この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; 
} 

あなたは私はあなたのインラインCSSを削除したことにも気付くでしょう。これにより、コードの保守が容易になります。

Answer 2

これはあなたが探しているものである場合、私は疑問に思う：jsfiddle

画像がelemetsを下に突きつけたいくつかの隠しパディングが付属していて、私はimg{display:block;}に追加。

Answer 3

あなたのサムネイルが画像を41pxの特定の高さに設定しています。画像のサイズを変更するか、divのサイズを変更するか、外側divのオーバーフローを設定します。