在文本排版中，如果不进行特殊设置，浏览器就默认对图片和文字分行显示，这显得不大美观。div css图文混排的实现主要通过float属性来控制。
1、图片浮在文字的左边：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>div css图文混排</title> <style type="text/css"> img{ float:left; /*图片浮在左边*/ margin:5px; /*设置图片与文字的间距*/ } </style> </head> <body> <img src="tu1.jpg"/> <p>初移动互联网阶段。3G网络建设初具规模，消费者感受到3G网络的价值，电信运营商也把流量资费降到一个大家比较可能接受的范围。 最重要的是智能手机出现革命性变化。智能手机完全打破了PC思维，功耗、体积成为重要的关注对象， 速度也大大提升，功能逐渐强大，操作系统的UI、UE设计出现了根本性的变革，用户有了完全不同于功能手机时代的感受与体验。</p> </body> </html> |
预览：
2、图片浮在文字的右边，css代码改为：
1 2 3 4 5 6 |
<style type="text/css"> img{ float:right; /*图片浮在右边边*/ margin:5px; /*设置图片与文字的间距*/ } </style> |
预览：
