图片和文字顶部对齐,文字环绕图片_Div+Css_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

来源：未知作者：类型：图文教程点击次数：发布时间：2015-07-28 16:04:14

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

代码如下：

01<style>
02/*防止浮动塌陷*/
03div{overflow:hidden; *zoom:1;}
04/*文字和图片都左浮动*/
05img,p{float:left;}
06</style>
07<div style="width:300px">
08    <img  src="http://www.5imoban.net/view/demoimg/1.jpg" />
09    <p>
10        免费网页模板,免费网页css模板,免费网页psd模板,免费源码下载,免费网页特效,免费js特效,免费jquery特效,jquery幻灯片代码,网站特效,免费建站教程,免费网站素材,酷站欣赏
11    </p>
12</div>

这样感觉太麻烦了，而且，文字超出图片部分不会环绕图片，今天发现，只要给图片加个“align='left'”即可解决。不要说图片没有align属性，但是就是可以。而且兼容IE6+，先看效果：

下面是代码分享：

1<div style="width:300px">
2    <img align="left"  src="http://www.5imoban.net/view/demoimg/1.jpg" />
3        免费网页模板,免费网页css模板,免费网页psd模板,免费源码下载,免费网页特效,免费js特效,免费jquery特效,jquery幻灯片代码,网站特效,免费建站教程,免费网站素材,酷站欣赏
4</div>

没有用到一个css样式，也没有用到任何浮动，文字也不需要特意加个容器装起来，却实现了图片和文字的顶对齐，并且文字环绕图片。紧紧是在img加了个“align="left"”。就这么简单。