![]()
首先，而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。
![]()
例如：
<img src="圖片網址"
style="float:left;"/> (圖片置左)
<img src="圖片網址"
style="float:right;"/> (圖片置右)
同時，這邊要特別提醒的是：「
無論置左置右，圖片都要放在文字之前」。不然就失去效果了。例如，這篇文章的第一個小公仔就是放在文章的一開始，而第二個小公仔就是放在第一段文字的「......就可以了。」之後。這樣編排後，就會出現現在文章中的效果。
以這篇文章的原始碼作為「文繞圖」的例子，
請特別注意文字與圖片的「前後關係」！
<![CDATA[<img style="float:left;margin:0 20px 20px;height:auto;;position:inherit !important;" indx="16414643" rank="11" irank="1034455001" atitle='[CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)' alt="" data-src="//mepopedia.com/group/ncnu-dfll/avatar.png" data-srcset="" class="rs-article-img-src do-lazy">
首先，而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。
<img style="float:right;margin:20px;height:auto;;position:inherit !important;" indx="16414643" rank="11" irank="1034455001" atitle='[CSS] 文繞圖用法與注意事項（img style="float:right"） (1 reply)' alt="" data-src="//mepopedia.com/group/ncnu-dfll/avatar.png" data-srcset="" class="rs-article-img-src do-lazy">
例如：
<img src="圖片網址" <span style="color: #FF0000">style="float:left;"</span>/> (圖片置左)
<img src="圖片網址" <span style="color: #FF0000">style="float:right;"</span>/> (圖片置右)
同時，這邊要特別提醒的是：「<b>圖片要放在文字之前</b>」。不然就失去效果了。例如......]]>
首先，而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。