在CSS中,您可以使用相對定位(relative positioning)或***定位(absolute positioning)將文字放置在圖片下方,以下是使用相對定位的方法:
1、在HTML中創(chuàng)建一個表格,并在表格中添加圖片和文字。
<table> <tr> <td> <img src="image.jpg" alt="圖片" /> </td> <td> <p>這是一段文字</p> </td> </tr> </table>
2、在CSS中設(shè)置表格的樣式,您可以將表格的寬度設(shè)置為100%,并將圖片和文字分別設(shè)置為相對定位:
table { width: 100%; } img { position: relative; top: 0; left: 0; } p { position: relative; top: 50px; /* 根據(jù)需要調(diào)整文字與圖片的距離 */ left: 0; }
在上面的CSS代碼中,position: relative;
表示圖片和文字相對于其正常位置進(jìn)行定位。top: 0;
和left: 0;
表示圖片和文字位于其正常位置,對于文字,top: 50px;
表示文字距離圖片底部50像素,您可以根據(jù)需要調(diào)整這個距離。
這種方法適用于將文字放置在圖片的下方,并且當(dāng)圖片大小改變時,文字的位置也會自動調(diào)整,如果您希望文字始終位于圖片的下方,無論圖片的大小如何變化,那么這種方法是非常有效的。