CSS可以幫助我們輕松地將圖片放到文字右邊，使得網頁看起來更加美觀。在下面的代碼實例中，我們將會展示如何使用CSS完成這個效果：

/**
* 將圖片放到文字右側
*/
.image-with-text {
display: flex;
align-items: center;
}
.text {
flex: 1;
}
.image {
margin-left: 20px;
}

以上代碼使用了flex布局來使得文字和圖片處于同一行，并使用了margin-left屬性來設置圖片與文字之間的距離。

在HTML中，我們需要將文字和圖片分別包含在兩個不同的元素中，并為這些元素設置相應的類名：

<div class="image-with-text">
<p class="text">這里是一段文字。</p>
<img class="image" src="image.jpg" alt="圖片">
</div>

以上代碼將文字和圖片都包含在一個父元素中，并為父元素設置了類名image-with-text。文字元素使用了p標簽，并為其設置了類名text，而圖片元素使用了img標簽，并為其設置了類名image。

接下來，我們在CSS中針對這三個類名分別設置樣式：

.image-with-text {
display: flex;
align-items: center;
}
.text {
flex: 1;
}
.image {
margin-left: 20px;
}

以上代碼使用了flex布局來使得文字和圖片處于同一行，并通過align-items屬性將它們垂直居中。text類表示文字元素，使用了flex: 1屬性來占據剩余的寬度。而image類表示圖片元素，使用了margin-left屬性來設置圖片與文字之間的距離。

最終運行結果如下所示：

這里是一段文字。

使用以上方法，我們可以輕松地實現將圖片放到文字右邊的效果。