如果您想把文字放在圖片下面,可以使用CSS的position和bottom屬性。當position設置為absolute時,bottom屬性將使元素與父元素底部對齊,從而實現讓文字置于圖片底部的效果。
<div class="container">
<img src="image.jpg" alt="example image">
<p class="caption">這是一張示例圖片</p>
</div>
.container {
position: relative;
}
.caption {
position: absolute;
bottom: 0;
}
在上面的示例中,我們使用了一個div容器包裹圖片和文字。我們把div容器的position屬性設置為relative,這樣p元素就可以使用絕對定位,相對于容器為基準。然后我們把p元素的position屬性設置為absolute,bottom屬性設置為0,就實現了把文字置于圖片底部的效果。
當然,還有其他的方式可以實現相同的效果,比如使用flexbox布局或者使用CSS的calc()函數進行計算。但上面的示例是使用最基本的CSS屬性來實現這個效果的,對于初學者來說,比較容易理解和掌握。
上一篇php 優化 擴展