将图像对齐

Question

我有一个包含图像和说明的产品列表。如何最好地对齐learn more文字，以便它直接在文字说明下。我可以通过在图像中添加margin-bottom来解决此问题，但这看起来像是一种破解方式，并且效果不佳。

请看这image作为我想要实现的更好的解释。

Answer 1

以下是工作示例：确保在发布后添加clearfix或添加overflow：对其隐藏，因为它的两个子项都已浮动。

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