HTML 使用文繞圖

簡單的就可以讓文字繞著圖片，擁有像雜誌那樣的排版。
在小圖或是直的圖片上，有很大的用處。

方法一：

平常插入圖片的 html code 如下所示：

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

如果要使用文繞圖，要加入一小段 CSS code 到裡面，如下所示：

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

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

再來，只改這樣的話，圖片和文字會太靠近，看起來會貼太近了，所以再加入一小段 code，如下行所示：

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

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


方法二：

CSS中
-------------------------------------------
.imgLeft{
float:left;
margin:15px;
}

.imgRight{
float:right;
margin:15px;
}
-------------------------------------------

HTML中

靠左圖片
<img src="你的圖片路徑" class="imgLeft">

靠右圖片
<img src="你的圖片路徑" class"imgRight">

-------------------------------------------

參考與修改自stOOrz的HTML 使用文繞圖 以及PTT.CC上HiroshiKen的解答。