css - 将文本与图像旁边对齐

Question

我有一个包含图像和描述的产品列表。如何最好地对齐了解更多文本，使其直接位于文本描述下方。我可以通过在图像中添加 margin-bottom 来解决这个问题，但这似乎是一种黑客方法，而且效果不太好。

请参阅此image作为对我想要实现的目标的更好解释。

Answer 1

这里是工作示例:请确保在发布后执行clearfix或添加overflow:hidden，因为它的两个子项都是 float 的。

.post {
  clear:both;
  overflow:hidden;
}
.post img {
  float:left;
  margin-right:15px;
  }
.post .post-Excerpt {
  float:left;
}

<div class="post">
  <img style="vertical-align:middle" src="https://placehold.it/160x160">
  <div class="post-excerpt">
  <h2>This is title</h2>
  <p>THis is lorem ipsum text that goes here as paragraph test. THis is lorem ipsum text that goes here as paragraph test. </p>
    <a href="#">Read more</a>
  </div>
</div>