如果你正在尋找一種簡單而美觀的方法來將文字添加到圖片中，那么CSS中的float屬性就是你需要的。 在本教程中，我們將向您展示如何使用float將文本添加到圖片右側。
<div class="image"> <img src="example.png" alt="Example"> <p>這是一個例子文本</p> </div>
首先，我們將創建一個包含圖像和文本的
元素。 我們將使用
float屬性來使圖像向左浮動，并將文本包裝在其旁邊。.image {
float: left;
margin: 0 10px 0 0;
}
.image img {
max-width: 100%;
height: auto;
}
.image p {
margin: 0;
}接下來，我們添加CSS樣式以實現我們的效果。 我們將設置圖像的max-width屬性，以確保其在不失真的情況下適應其容器。 我們還將去除文本的默認外邊距。
<div class="image"> <img src="example.png" alt="Example"> <p>這是一個例子文本</p> </div>
最后，我們將用正確的文件路徑替換圖像的src屬性。 確認樣式表鏈接到文檔中，并預覽您的網頁以查看效果。
這就是如何使用CSS將文本添加到圖片右側！ 快去嘗試一下吧。