第一种方法是背景图片法
这种方法适用于非动态内容,图片用于装饰的情况下。主要是设置父元素的padding的宽度为背景图片的宽度加上图片和文字的间距,然后把背景图片定位到padding里面就可以了。
第二种方法是浮动法
这种方法比较灵活,应该是float的经典应用了。思路是对左右元素都设置浮动和宽度。但是一定要注意清除子元素的浮动及ie6的双倍margin,不然会出现错误效果或影响其他元素的布局
第三种方法是overflow法
这种方法的html代码和浮动法一样,在这里只是id变了下方便测试demo。其思路是左边元素浮动,而对右边元素设置overflow为hidden,一样完美兼容(注意在ie6下左边元素浮动,右边元素没有浮动会有3px的间距)
<p><img src="../201007/image/ct_tow03.jpg">
asdasdsadasdngbhjsdgsdjfgsdjfdsjf
</p>
<style>
img{
float:left
}
p{
padding-top:15px
width:450px
font-size:12px
clear:both
} </style>
注意混排的时候不要用连续的英文和数字 只要有空格或汉字 就能正常显示了