html - HTML & CSS コメント一覧

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

ここでソリューションを確認できますhttp://jsbin.com/edit/637/。コードを少し変更するだけです。

HTML

<div class="friend">
  <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
                <div id="friend-bio">
                    <h4>John Smith</h4>
                    <p>Just another comment</p>
                </div>
</div>
<br>
<div class="friend">
  <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
                <div id="friend-bio">
                    <h4>John Smith</h4>
                    <p>Just another comment</p>
                </div>
</div>
<br>
<div class="friend">
  <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
                <div id="friend-bio">
                    <h4>John Smith</h4>
                    <p>Just another comment</p>
                </div>
</div>

とCSS

.friend #friend-image {
    border: 1px solid #F0F2F8;
    display: inline-block;
    float: left;
    height: 85px;
    width: 84px;
}
#main #friend #friend-bio {
    float: left;
    font-size: 14px;
    margin: -7px 0 0 20px;
    width: 454px;
}
#main #friend #friend-bio h4 {
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 5px;
}