我尝试过编写评论列表,其中化身应该显示在左侧,名称和评论应该显示在右侧。任何解决问题的帮助都表示赞赏。
结果
期望的结果
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;
}
答案 0 :(得分:6)
将<img>
s 放在段落之前(无论如何它们似乎都属于这些段落)。然后让他们float: left
。您可以在它们的右侧添加边距,以便根据需要创建更多间距。