对齐图像旁边的文字

时间:2016-03-04 21:05:48

标签: css

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

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

1 个答案:

答案 0 :(得分:2)

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



.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>
&#13;
&#13;
&#13;