HTML 注释列表 [英] HTML Comment List

问题描述

我尝试编写一个评论列表，其中头像应该显示在左侧，名称和评论应该显示在右侧.感谢您帮助解决问题.

结果

预期结果

HTML

 
<div class='friend'><h3>约翰·史密斯</h3><p>只是另一个评论</p><img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>

<div class='friend'><h3>约翰·史密斯</h3><p>只是另一个评论</p><img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>

<div class='friend'><h3>约翰·史密斯</h3><p>只是另一个评论</p><img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>

</节>

CSS

 body {字体:14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;颜色:#333；}一种 {颜色:#333；文字装饰:无；}h1, h2, h3 {字体粗细:400；}h1{字体大小:30px；}h2{字体大小:24px；}h3{字体大小:20px；}图像{高度:自动；宽度:100%；}部分 {填充:30px 60px；}.朋友 img {高度:70px；宽度:100px；显示:块；}

解决方案

将 <img> 的 放在段落之前(无论如何它们似乎都属于该位置).然后让它们float: left.如果您愿意，您也可以在它们的右侧添加边距以创建更多间距.

http://jsfiddle.net/Q8emr/

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

解决方案

Place the <img>s before the paragraphs (where they seem to belong anyway). Then have them float: left. You can add a margin to the right of them as well to create more spacing if you like.

http://jsfiddle.net/Q8emr/

这篇关于HTML 注释列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！