对齐图像旁边的文字

Question

我有一系列带有图片和说明的产品。如何最好地对齐learn more文本，使其直接位于文字说明下。我可以通过在图片中添加margin-bottom来解决这个问题，但这似乎是一种破解方式，并且效果不佳。

请参阅此image以更好地解释我想要实现的目标。

Answer 1

以下是工作示例：确保在发布后添加clearfix或者添加溢出：隐藏到它，因为它的两个子都是浮动的。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;