CSS是一種常用的網頁排版語言，它可以幫助我們實現網頁上各種復雜的效果，其中就包括圖片的擺放。下面我們來學習一下如何使用CSS將圖片左右擺放。

<style>
.img-left {
float: left;
margin-right: 20px;
}
.img-right {
float: right;
margin-left: 20px;
}
</style>

首先我們需要為圖片分別添加兩個類名，分別為"img-left"和"img-right"。然后在CSS中設置這兩個類名的樣式，使用"float"屬性將圖片分別向左和向右浮動，并使用"margin"屬性控制圖片與文本之間的間距。

下面我們來看一下如何使用這兩個類名實現圖片左右擺放。

<p>這是一段文本，下面將分別展示兩張圖片的左右擺放效果。</p>
<img src="img1.jpg" alt="圖片1" class="img-left">
<p>這是圖片1的說明文字。</p>
<img src="img2.jpg" alt="圖片2" class="img-right">
<p>這是圖片2的說明文字。</p>

在HTML中，我們可以通過給圖片設置class類名來調用CSS中的樣式，從而實現圖片的左右擺放效果。上述代碼中，第一張圖片設置了"img-left"的類名，第二張圖片設置了"img-right"的類名，分別實現了圖片向左和向右擺放的效果。

在實際應用中，我們可以使用這種方法將多個圖片或圖文混排實現更加豐富的頁面效果。