HTML和CSS注释列表

Question

I have tried tried coding a comment list where the avatar is supposed to display on the left, and the name and comment are supposed to display on the right. Any help solving the issue is appreciated.

Outcome

Desired Outcome

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

you would want to add float to your image
like

.friend img{
 float:left;
}

here's a fiddle

Answer 2

Float your h3 and p tags to the right.

.friend h3, .friend p {
    float: right;
}

Altneratively, have the image first and float it to the left.

http://css-tricks.com/all-about-floats/

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 3

I would recommend you to use inline-block instead of float in CSS with vertical-align, here you can see the result: http://jsfiddle.net/gG5uv/3/ .

.friend img {
    height: 70px;
    width: 100px;
    display: inline-block;
    vertical-align: top;
}
.friend .data {
    display: inline-block;
    vertical-align: top;
}

I've also added a semantic separation between image and personal data of each item creating a div with class data .

Answer 4

Hey You can check your solution here at http://jsbin.com/edit/637/ . Just a few changes in your code.

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>

and 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;
}