首页 > 建站教程 > Div+Css >  图片和文字顶部对齐,文字环绕图片正文

图片和文字顶部对齐,文字环绕图片

我爱模板网在做网站时,发现一个问题,就是当遇到图片和文字混排,希望文字图片顶对齐,一般都会给文字套一个层,图片套一个层,然后一起左浮动或友浮动,效果如下:

代码如下:
<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"”。就这么简单。