HTML页面中如何实现图文绕排

网络与通信

丁柏栋

在上一期的D5版中，《HTML页面中实现文字绕排》一文介绍了文字绕排，本期再来看看HTML页如何实现图文绕排，这也是比较常用的，初学者应该掌握。

1. 无图文绕排的页面

首先看一个没有实现绕排的例子，如（图1）。

图1
图1

（图1）中是没有使用绕排的页面效果，最上面一行的文字和图片同行，但没有使用图文绕排，由于图片的高度比文字高很多，因此在文字的上方留下了比较大块的空白，视觉效果较差。
代码如下：
文件名称：noround.html






无绕排的演示






这里是普通的，没有绕排，由于在这里图片和文字同在一行中，但图片高度比文字要高，因此在文字上方留出了空白，视觉效果不好。
 ；  ； 国内的VB网站中vbgood以资料量丰富，人气旺而深受编程爱好者的喜欢。
 ；  ； 天极网是国内最大的IT专业网站。


2. 使用图文绕排的页面

如果使用图文绕排的效果如何呢？
如（图2）效果所示， round.html这个文件中使用了图文绕排，由于在这里文字按图片的高度重新排列，在图片的高度里并排了4行文字，占满了刚才没有使用图文绕排的位置，视觉效果很好。

图2
图2

这是如何实现的呢？请先看下面的代码：
文件：round.html






图文绕排的演示








这里是使用了图文绕排后的，由于在这里文字按图片的高度重新排列，在图片的高度里并排了4行文字，占满了刚才没有使用图文绕排的位置，视觉效果很好。
 ；  ； 国内的VB网站中vbgood以资料量丰富，人气旺，而深受程序爱好者的喜欢。
 ；  ； 天极网是国内最大的IT专业网站。



看过了上面round.html这个文件的代码也许你已经明白了，round.html文件中比noround.html文件中的img元素中多了2个属性“hspace="1" align="left"”，确实是这样的。其中“hspace”表示图片的两侧的宽度，值为正整数，（图3）是改成“50”后的效果：
图3
图3

“align”表示图片的位置，可以设置的值有：“left”-左侧，“center”-中间，“right”-右侧。align="right"时的效果：
大家一定要学会举一反三，活学活用。大家有疑问可以E-mail：amtd@263.net，希望大家交流，共同进步。