如何使用CSS製作「圖說文繞圖」 (範例實作)

很多朋友應該都知道如何使用標準的 html 達成簡易的文繞圖效果，作法很簡單，只需要在 img 標籤中加入以下參數即可：align="left" 或是 align="right" ；另外若是文字與圖片緊貼著不好看，你也可以使用 vspace 和 hspace 使圖片與文字之間預留空間。

以下為完整用法：

<img src="path.to.image" align="right" hspace="8px" vspace="5px">

不過眼尖的朋友應該可以發現，使用 hspace 和 vspace 會使圖片的上下及左右皆出現間隔，這樣一來便會讓圖片於相對的內文無法對齊（如上圖所示）；且無法順利的加入圖說（caption）。

以下將介紹如何使用簡單的CSS來製作方便實用的文繞圖效果，且可以漂亮的對齊內文。

CSS語法

    <style type="text/css">
        .img_left 
        {
            float:left;
        }
        
        .img_right 
        {
            float:right;
        }

    </style>

左邊文繞圖

<img class="img_left" src="http://f.blog.xuite.net/f7/b7/10055976/blog_6267/txt/126866/126866_8.gif" alt="" />

右邊文繞圖

<img class="img_right" src="http://f.blog.xuite.net/f7/b7/10055976/blog_6267/txt/126866/126866_8.gif" alt="" />

範例：

/* --- 文繞圖start -------------- */
div.image-left {
float: left;
margin: 0 8px 8px 0;
}

div.image-left img {
border: 1px solid #ccc;
padding: 4px;
}

div.image-left p {
color: #666;
font-family: 'Lucida Grande', Lucida Sans Unicode;
font-size: 9px ;
margin: 3px 0 0;
text-align: center ;
}

<div class="image-left">
<img alt="alter text" src="path.to.image" />
<p>caption caption caption</p>
</div>