在網(wǎng)頁設(shè)計(jì)中，圖片加文字的效果是非常常見的。但是很多人不知道該如何將文字放置在圖片的右邊。下面就來介紹一下如何通過CSS來實(shí)現(xiàn)。

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

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

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

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

現(xiàn)在我們已經(jīng)有了一個(gè)容器，接下來就是將圖片和文字進(jìn)行排列。我們可以使用float屬性將圖片左浮動(dòng)，將文字右浮動(dòng)，但這樣可能會(huì)出現(xiàn)一些問題，因?yàn)槲谋玖髦械目臻g占用和浮動(dòng)元素的相互作用不容易控制。為了避免這些問題，我們可以使用flexbox布局。我們可以將容器設(shè)置為flex布局，使其子元素分別占據(jù)容器的一定比例，實(shí)現(xiàn)不同元素之間的對(duì)齊和排列。

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

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

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