[教學] HTML 使用文繞圖

[stOOrz6 (stOOrz)]

        原文: http://blog.stoorz.org/archives/2007/03/06/76/


有時候寫文章的時候，會想要讓文章看起來跟報章雜誌一樣，圖片會被文字圍繞
起來，這時候就要自己將 html code 加點手腳。

正常插入圖片的 html code 如下行所示

    <img src="你的圖片路徑">

如果要使用文繞圖的話，只要加入一段 CSS code 到裡面，如下行紅色 code 所
示

    <img src="你的圖片路徑" style="float: left">

left 表示圖片的位置在左邊，也可以改成 right，這樣圖片的位置就會變成在
右邊。

另外，只改這樣的話，圖片和文字會太靠近，看起來會覺得黏在一起，所以我們
可以再加入一小段 CSS code，如下行藍色 code 所示

    <img src="你的圖片路徑" style="float: left; margin: 15px">

表示設定圖片四周會有 15 個 pixels 的空間，也就是文字距離圖片會有 15
pixels，看起來就會比較清爽了， 15 這個數字可以隨意更改成任何適合的數字
。


        原文: http://blog.stoorz.org/archives/2007/03/06/76/


--
stOOrz

http://blog.stoorz.org/

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 61.229.14.228
推 flylover:感謝熱心教學
→ xzonisy:不知道能不能有CSS寫法 直接寫死在CSS檔案裡面
推 AmazingRustu:感謝！