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

您想将浮动添加到您的图像中
，例如

.friend img{
 float:left;
}

这是一个小提琴

Answer 2

我建议你在 CSS 中使用 inline-block 而不是 float 和 vertical-align，在这里你可以看到结果：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;
}

我还在创建divwith 类的每个项目的图像和个人数据之间添加了语义分离data。

Answer 3

嘿，您可以在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;
}

Answer 4

h3将您的和标签浮动p到右侧。

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

或者，首先拥有图像并将其浮动到左侧。

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

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