為什么我的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

我錯過了什么？

Answer 1

它們是重疊的，因為你是浮動一個div，但沒有清除浮動。

使用clearfix方法清除浮動。 將一個類container添加到容器div並使用此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

我添加了img{display:block;}因為圖像帶有一些隱藏的填充，可以將元素向下推。

Answer 3

您的縮略圖將圖片設置為41px的特定高度。 更改圖片大小，或更改div大小或設置外部div的溢出。