CSS控制文字位置在圖片右邊的方法

在CSS中，我們可以使用浮動（float）屬性將文字放置在圖片的右邊，以下是一個簡單的示例：

HTML代碼：

<div>
    <img src="image.jpg" alt="圖片" />
    <p>這是一段文字，將在圖片的右邊顯示。</p>
</div>

CSS代碼：

img {
    float: left; /* 將圖片放置在左邊 */
}
p {
    clear: right; /* 清除右邊的浮動，使文字在圖片的右邊顯示 */
}

在這個示例中，圖片被設置為浮動到左邊，而文字則被設置為在右邊清除浮動，這樣，文字就會顯示在圖片的右邊，這種方法非常適用于將文字與圖片并排顯示的情況。

我們還可以使用Flexbox（彈性布局）來實現(xiàn)文字在圖片右邊的效果，以下是一個使用Flexbox的示例：

HTML代碼：

<div style="display: flex; justify-content: flex-end;">
    <img src="image.jpg" alt="圖片" />
    <p>這是一段文字，將在圖片的右邊顯示。</p>
</div>

在這個示例中，我們使用了display: flex屬性將div元素轉換為彈性布局，并使用justify-content: flex-end對齊到右邊，這樣，圖片和文字就會顯示在右邊，這種方法也非常適用于將文字與圖片并排顯示的情況。