div+css布局之图文混编

1、我们经常会在网页中看到如下效果，文章内右侧嵌套一张图片或者广告，这个都是div+css 浮动来实现的

3、预览效果如下：

5、预览效果：

7、解释：图片宽度300px, 而给div设定320px，也就是想让文字和图片中间有20像素的距离，但是只是添加width:320之后发现，文字和图片仍然紧贴在一起，反而图片右侧出现20像素的空白，那么我们让图片居右显示，也就是text-align:right;最终效果如下：