在網頁設計中，圖片加文字的效果是非常常見的。但是很多人不知道該如何將文字放置在圖片的右邊。下面就來介紹一下如何通過CSS來實現。

<div class="img-container">
<img src="example.jpg" alt="example">
<p>這是圖片的說明文字</p>
</div>

首先，我們需要將圖片和文字都放在一個容器中。這個容器可以是一個div。

接著，我們需要設置這個容器的樣式。我們可以使用CSS的display屬性來設置容器的布局方式，比如使用flex或者grid。這里我們就使用flex布局。

.img-container {
display: flex;
align-items: center;  /* 縱向居中 */
}

現在我們已經有了一個容器，接下來就是將圖片和文字進行排列。我們可以使用float屬性將圖片左浮動，將文字右浮動，但這樣可能會出現一些問題，因為文本流中的空間占用和浮動元素的相互作用不容易控制。為了避免這些問題，我們可以使用flexbox布局。我們可以將容器設置為flex布局，使其子元素分別占據容器的一定比例，實現不同元素之間的對齊和排列。

.img-container {
display: flex;
align-items: center;  
}
.img-container img {
flex: 1;
margin-right: 20px;
}
.img-container p {
flex: 3;
}

在這個例子中，我們將圖片的樣式設置為flex:1，表示在該容器中只占據1/4的空間，將文字的樣式設置為flex:3，表示占據3/4的空間。同時給圖片添加margin-right:20px，避免圖片與文字之間過于擁擠。

到這里，我們已經成功的將文字放置在了圖片的右側。這種方法可以很好地控制文字的位置和圖片的大小，并且可以讓頁面布局更加靈活。