在網頁設計中，經常需要在文本中添加圖片來豐富內容。為了讓頁面看起來更加美觀，我們通常會設置圖片居左、居中或居右對齊。今天我們來看一下如何使用CSS實現圖片居左效果。

img{
float:left;
margin-right: 10px;
}

在上面的CSS代碼中，我們使用了浮動（float）和外邊距（margin）屬性。將圖片設置為左浮動后，它會跳到文本的左側，與文本在同一行顯示。我們再添加一個右外邊距，通過這種方式來調整圖片與文本之間的間距。

值得注意的是，如果在同一個父元素中有多個圖片，需要將它們都設置為左浮動，這樣才可以讓它們在同一行顯示。

img{
float:left;
margin-right: 10px;
}
/*添加多張圖片*/
img:nth-child(odd){
clear: both; /*清除浮動，使得每行只顯示偶數張圖片*/
}

在上面的CSS代碼中，我們通過:nth-child()選擇器選中了包含奇數個子元素的圖片，添加了clear屬性，使它們不再跟前面的圖片在同一行，而是下移一行。這樣就實現了多張圖片的居左效果。

總之，通過CSS的浮動和外邊距屬性可以很方便地設置圖片的居左效果。希望本文能對大家有所幫助。