Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[CSS] 文繞圖用法與注意事項(img style="float:right")

首先,而要達到「文繞圖」。在 <img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。
例如:
<img src="圖片網址" [color=#FF0000]style="float:left;"[/color]/> (圖片置左)
<img src="圖片網址" [color=#FF0000]style="float:right;"[/color]/> (圖片置右)

同時,這邊要特別提醒的是:「無論置左置右,圖片都要放在文字之前」。不然就失去效果了。例如,這篇文章的第一個小公仔就是放在文章的一開始,而第二個小公仔就是放在第一段文字的「......就可以了。」之後。這樣編排後,就會出現現在文章中的效果。


以這篇文章的原始碼作為「文繞圖」的例子,請特別注意文字與圖片的「前後關係」!
<img src="http://mepopedia.com/group/ncnu-dfll/avatar.png" style="float:left;margin:0 20px 20px"> 首先,而要達到「文繞圖」。在 &lt;img> 裡面加上 style="float:left" (圖片置左) 或 style="float:right" (圖片置右) 就可以了。 <img src="http://mepopedia.com/group/ncnu-dfll/avatar.png" style="float:right;margin:20px"> 例如: &lt;img src="圖片網址" [color=#FF0000]style="float:left;"[/color]/> (圖片置左) &lt;img src="圖片網址" [color=#FF0000]style="float:right;"[/color]/> (圖片置右) 同時,這邊要特別提醒的是:「<b>圖片要放在文字之前</b>」。不然就失去效果了。例如......


Edited 2 time(s). Last edit at 10/22/2011 04:29PM by JinJin.
(編輯記錄)

Inilne style (直接在標籤中設定) 的用法:

直接在 <img> 中寫上 style="display:block; margin:auto;" 。例如:

<img src="圖片網址" style="display:block; margin:auto;"/>

CSS 用法:
img { display:block; margin: auto; /* max-width: 500px; 建議可加上「最大寬度」讓圖片不會過大。500px只是一個例子*/ }

附注:這個用法應是跨瀏覽器相容的。



Edited 1 time(s). Last edit at 09/29/2011 11:40PM by mepoadm.
(編輯記錄)