2012-11-07 来源:网络
【实例名称】
JS代码实现文字环绕图片
【实例描述】
在Word文档的制作过程中经常会遇到图片和文字都存在的情况,为了版面更合理通常需要特殊的效果,如文字环绕图片。本例就学习如何使文字环绕图片。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页-学无忧(www.xue51.com)</title> </head> <body> <div style="background:#EEEEEE;padding:10px;width:240px;"> <img src="logo1.gif" width=100 height=95 id=img1 style="float:right;"> <div id="mydiv" style="clear:none;">国家环保总局宣布今 起松花江进入为期十年的“休养期”,并提出70条具体的治理措施,其中包括 停止审批所有从松花江流域向外流域的调水工程,逐步淘汰松花江流域钢铁、 电力、焦炭、造纸等行业的落后生产能力。</div> </body> </html>
【运行效果】
【难点剖析】
本例的重点是样式表中的“clear”:在一个大容器内如果定义了float元素(本例中img图片定义了float样式),那么后面的元素会与其一起分享大容器剩下的宽度.如果既不想和float一起同行显示,又不想在浏览器中错位,那就得用到”clear:both”取消所有浮动。
【源码下载】
为了JS代码的准确性,请点击:文字环绕图片 进行本实例源码下载