html - HTML 注释列表

Question

我尝试编写一个评论列表，其中头像应该显示在左侧，名称和评论应该显示在右侧。任何解决问题的帮助表示赞赏。

结果

期望的结果

HTML

    <section>
    <div class='friend'>
        <h3>John Smith</h3>
        <p>Just another comment</p>
        <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
    </div>
    <div class='friend'>
        <h3>John Smith</h3>
        <p>Just another comment</p>
        <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
    </div>
    <div class='friend'>
        <h3>John Smith</h3>
        <p>Just another comment</p>
        <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
    </div>
</section>

CSS

  body {
    font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}
    a {
    color: #333;
    text-decoration: none;
    }

    h1, h2, h3 {
    font-weight: 400;
    }

    h1 {
    font-size: 30px;
    }

    h2 {
    font-size: 24px;
    }

    h3 {
    font-size: 20px;
    }

    img {
      height: auto;
      width: 100%;
    }

    section {
    padding: 30px 60px;
    }

    .friend img {
    height: 70px;
    width: 100px;
    display: block;
    }

Answer 1

将<img>s放在段落之前（无论如何它们似乎属于的地方）。然后拥有它们float: left。如果您愿意，您也可以在它们的右侧添加边距以创建更多间距。

http://jsfiddle.net/Q8emr/