19

左と右の 2 つの子 div を含むリスト要素内に親 div を作成しようとしています。左側には画像が含まれ、右側にはテキストとタイムスタンプを含む 2 つの追加の 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を見てください

私は何が欠けていますか？

4

2 に答える 2

20

divをフローティングしているため、それらはオーバーラップしていますが、フロートをクリアしていません。

float をクリアするには、clearfix メソッドを使用します。コンテナ divにクラスを追加し、次のcontainerCSS を使用します。

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 を削除したことにも気付くでしょう。これにより、コードの保守が容易になります。

于 2013-04-15T14:42:09.903 に答える
0

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

于 2013-04-15T14:42:23.707 に答える