使用CSS樣式將圖片居右的方法
在HTML編寫中，經常需要在文本中插入圖片，但是默認情況下圖片會占據一整行，破壞了頁面的布局。本文將介紹如何通過CSS樣式讓圖片居右。
首先在HTML中使用img標簽插入圖片，可設置圖片的width和height屬性來控制大小。例如：

<img src="image.png" alt="圖片" width="200" height="150">

使用CSS中的float屬性可以將圖片“浮動”到文本的一側，可設置為left或right。例如：

img {
float: right;
}

這樣，圖片將會靠在文本的右側，文本將自動環繞圖片。同時，需要給圖片的外層容器設定寬度，防止圖片撐破布局。例如：

.image-container {
width: 50%;
}

以上代碼會將圖片所在的容器設定為頁面寬度的50%。
最后，可能需要給圖片和文本之間設定一些間距，這可以通過CSS的margin屬性來實現。例如：

img {
float: right;
margin-left: 10px;
}

這樣，圖片與文本之間會留出10像素的距離。完整的代碼如下：

<div class="image-container">
<img src="image.png" alt="圖片" width="200" height="150">
<p>這是一段文字，將會出現在圖片的左側。</p>
</div>
.image-container {
width: 50%;
}
img {
float: right;
margin-left: 10px;
}

通過以上代碼，我們就能夠輕松實現頁面中圖片的居右效果了。