轉載 / 文繞圖教學

教學 / 文繞圖 (轉自布拉格的羅傑-Xuite日誌) 有些人對這篇文章的文繞圖效果感到好奇，其實它是個非常簡單的語法喔!! 剛好看到不錯的教學，所以把它轉貼過來^^

說明： 1. 謝謝多位熱心網友的指教與分享，文繞圖效果有至少兩種方式可達成。除本篇外，您亦可參考這裡。看過並比較兩種方式，選擇您喜歡的做法。 2. CSS語法對大多數網友來說並不簡單。Xuite 有許多專家不斷發表教學文章，盡力解答各類CSS問題。如果您有興趣鑽研CSS，請先參考狗貓先生 (狗貓先生是公認熱心公益第一名，特此致敬！)，或安哥爾．摩亞小姐精采的網誌內容。歡迎各位留下想法及建議。本網誌所有文章皆可引用及重製，有勞您尊重著作權，勿修改任何內容，並註明" 本文作者布拉格的羅傑"。

記得剛開始是在 Xuite 上看到網友使用文繞圖，當時自以為是把圖文各放在不同表格，連忙自個兒逕自猛試 Table 指令N次，硬換了種種大小 Table，才發現不成。死了心去檢視別人的網頁原始檔，挖勒！文繞圖根本不是用 Table。如果你性急，不看完本文就想馬上試身手，以下是我使用的語法，希望能助你如願：

你可以抄錄這裡的紅色字串，插入 HTML 原始碼 < img src... > 的 img 跟 src 中間：
STYLE="FLOAT: LEFT; MARGIN: 15PX"

STYLE="FLOAT:" 指令要發揮作用，除了必須寫對，還得放在HTML原始碼正確的地方。我並非 CSS 專家，本文所載僅供各位自娛娛人。這裡僅就圖片的定位做說明，如果看官們有興趣深究 STYLE="FLOAT:" 指令，請參閱這裡，或 W3C網站。

先從寫出正確指令說起，STYLE="FLOAT:" 可以指定四種不同值：

STYLE="FLOAT: LEFT;"	物件 (在此是圖片) 置左
STYLE="FLOAT: RIGHT;"	物件 (在此是圖片) 置右
STYLE="FLOAT: NONE;"	不變
STYLE="FLOAT: INHERIT;"	物件 (在此是圖片) 繼承先前宣告值

對 Blogger 來說，懂得如何置左或置右就足夠了。

接著要用 MARGIN 指令設定圖片與文字間距：
設定間距的單位很多，我用 PX 這種相對單位；如果你改用 em，甚至其他絕對單位 in 或 cm 亦可。
為了不要逐一設定 margin-top,margin-right,margin-bottom,margin-left，我採用 MARGIN: 15PX 搞定間距問題，這會使圖片上下左右都會與文字間距 15PX。一般來說，5PX 到 15PX 之間的視覺效果都不錯，看官們不妨自己試試。

到這步驟為止，我們得到的原始碼是：STYLE="FLOAT: LEFT; MARGIN: 15PX"。請記得 MARGIN 跟上一段間要用分號隔開。以下為Xuite插入語法教學 (點我繼續閱讀)