web页面下实现文字环绕图片效果（转）

 

通常，我们在一段文字中插入图片时，图片都会独立显示为一行（这是因为img标签属于块级标签，会自动在上下留出一定的空白），也许我们不想这样，如果能像在word中一样实现文字环绕图片的效果多好啊！

以往，我们在处理这种情况时，都会利用表格来布置一个格局，然后再将图片放进去，周围的表格中再填入文字内容，效果确实不错，但如果再想修改某处的文字内容可就麻烦了，甚至要重新推倒重来。

其实我们只需借助CSS下的float（意为“浮动”）属性就不必这么烦恼了。

<p>黄山位于中国安徽省南部(东经118°09'北纬30°08')...</p>
<img src="hill.jpg" alt="黄山" style="float:left;" />
<p>黄山是以自然景观为特色的山岳旅游风景区，奇松、怪石...</p>
<p>黄山不仅以奇伟俏丽、灵秀多姿著称于世...</p>

上面代码中，我们为img标签加入了一个行内样式表，应用了float属性，赋值为left（你也可以试试right^_^），现在看看，效果是不是和以前不同了。