<style> /*防止浮动塌陷*/ div{overflow:hidden; *zoom:1;} /*文字和图片都左浮动*/ img,p{float:left;} </style> <div style="width:300px"> <img src="http://www.5imoban.net/view/demoimg/1.jpg" /> <p> 免费网页模板,免费网页css模板,免费网页psd模板,免费源码下载,免费网页特效,免费js特效,免费jquery特效,jquery幻灯片代码,网站特效,免费建站教程,免费网站素材,酷站欣赏 </p> </div>这样感觉太麻烦了,而且,文字超出图片部分不会环绕图片,今天发现,只要给图片加个“align='left'”即可解决。不要说图片没有align属性,但是就是可以。而且兼容IE6+,先看效果:
下面是代码分享:
<div style="width:300px"> <img align="left" src="http://www.5imoban.net/view/demoimg/1.jpg" /> 免费网页模板,免费网页css模板,免费网页psd模板,免费源码下载,免费网页特效,免费js特效,免费jquery特效,jquery幻灯片代码,网站特效,免费建站教程,免费网站素材,酷站欣赏 </div>没有用到一个css样式,也没有用到任何浮动,文字也不需要特意加个容器装起来,却实现了图片和文字的顶对齐,并且文字环绕图片。紧紧是在img加了个“align="left"”。就这么简单。