2016-03-04 173 views
2

我有一個包含圖像和說明的產品列表。如何最好地對齊learn more文字,以便它直接在文字說明下。我可以通過在圖像中添加margin-bottom來解決此問題,但這看起來像是一種破解方式,並且效果不佳。將圖像對齊

請看這image作爲我想要實現的更好的解釋。

+0

把一個div內的所有產品文字並添加'float'。 –

回答

2

以下是工作示例:確保在發佈後添加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>