gpt4 book ai didi

HTML 评论列表

转载 作者:行者123 更新时间:2023-11-28 05:00:15 24 4
gpt4 key购买 nike

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

结果

期望的结果

enter image description here

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

最佳答案

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

http://jsfiddle.net/Q8emr/

关于HTML 评论列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16696802/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com