在網頁中，有時需要將圖片與文字結合使用，使得文章更加豐富多彩。而有些情況下我們希望圖片能夠顯示在文章的一側，這樣既不會干擾文章的排版，也能更好地襯托文章的主題。那么，如何使用 CSS 來實現這一效果呢？
首先，我們需要使用 HTML 的 p 標簽來包裹文字內容和圖片。例如，下面的代碼就是一個基本的案例：

<p> 這是一段文字，其中包含了一張圖片的描述。</p>
<p> <img src="placeholder.jpg" alt="占位圖片"> 這是一張占位圖片，用于演示排版效果。</p>

然后，我們需要使用 CSS 對圖片進行定位。在這里，我們可以使用 float 屬性來實現圖片沿文字排布的效果。具體而言，我們可以將圖片的 float 屬性設為 right，即將其靠右排列；同時，還需要注意讓文字內容不要與圖片重疊，可以在 p 標簽上使用 padding 或 margin 屬性來進行調整。下面是一份示例代碼：

p {
padding: 0px 10px;
margin-bottom: 20px;
}
img {
float: right;
margin-left: 10px;
}

在這里，我們將圖片的 margin-left 屬性設為 10px，使得它與文字之間有一定的間隔。如果需要頁面中多處都使用這種排版方式，我們也可以將上述 CSS 代碼打包成一個 class，然后在 HTML 的 p 標簽中應用這個 class。
最后，我們需要注意的一個問題是，當圖片排列到文字的右側時，如果該段落的長度超過了圖片的高度，就可能會出現排版混亂的問題，即文字會排到圖片的下方。此時，我們可以使用 clear 屬性來清除該段落內元素的浮動效果，讓它們恢復到正常的排布方式。例如：

p:after {
content: "";
display: table;
clear: both;
}

綜上所述，使用 CSS 讓圖片顯示在文章的右側并不難，只需要簡單地調整浮動和間距等屬性即可。不過，在使用該排版方式時，還需要注意避免出現文字與圖片重疊或者排版混亂的情況，從而使得文章能夠呈現出清晰美觀的效果。