通常,我们在一段文字中插入图片时,图片都会独立显示为一行(这是因为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^_^),现在看看,效果是不是和以前不同了。
如图:
注意:文字和图片必须要在一个容器内