實作範例：

首先，請打開您的style sheet並加入以下敘述：

/* --- 文繞圖start -------------- */

div.image-left {
float: left;
margin: 0 8px 8px 0;
}

div.image-left img {
border: 1px solid #ccc;
padding: 4px;
}

div.image-left p {
color: #666;
font-family: 'Lucida Grande', Lucida Sans Unicode;
font-size: 9px ;
margin: 3px 0 0;
text-align: center ;
}

並於 Body 中使用以下語法即可：

<div class="image-left">
<img alt="alter text" src="path.to.image" />
<p>caption caption caption</p>
</div>

另外，因為我們並沒有在CSS或是html中指定大小，因此若是上傳的圖片太大，便會讓圖片與文字失去控制，所以我們也可以在 div.image-left 加入寬度描述，以限定區域大小：

div.image-left {
float: left
margin: 0 8px 8px 0
width: 262px
}

完成，存檔收工。
有任何問題或是建議，歡迎留言告知，互相交流，謝謝。