認識銓尹網頁設計作品案例傳產商品業務擴展訊息佈達技術文件友站連結聯絡我們
  • 聯絡我們
  1. 首頁
  2. 技術文件
  3. 網頁疑難雜症
  4. HTML 使用文繞圖

HTML 使用文繞圖

[轉貼自] https://soarlin.pixnet.net/blog/post/3143466

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

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

   

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

    style="float: left">

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

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

    style="float: left; margin: 15px">

表示設定圖片四周會有 15 個 pixels 的空間,也就是文字距離圖片會有 15 pixels,看起來就會比較清爽了, 15 這個數字可以隨意更改成任何適合的數字。
© 2017 銓尹行銷顧問有限公司   Tel : 06-2881890   Fax : 06-2881810   E-mail : service小老鼠符號pctop.com.tw
Address : 71751 台南市仁德區成功一街153號   Support of technicality : 原點網頁設計公司   Victors : 00737762