图文混排

在工作中经常碰到图片和文字排版的问题，这里自己学习总结一下：

 

先看看例子

<div>
	<img src="aaaaaaaa.jpg" style="vertical-align: middle;float: left">
	<div>
		<span style="font-size: 90px;float: left">我</span>
		<span>时间的流失，转眼冬季就到了。我在班里的冯佑璋的鼓励下，去二池（当时夏天可游泳，冬天开冰场）学习滑冰。只能
			在晚场7：30-9：00练习；当时我又时间的流失，转眼冬季就到了。我在班里的冯佑璋的鼓励下，去二池（当时夏天可游泳，冬
			天开冰场）学习滑冰。只能在晚场7：30-9：00练习；当时我又时间的流失，转眼冬季就到了。我在班里的冯佑璋的鼓励下，去二
			池（当时夏天可游泳，冬天开冰场）学习滑冰。只能在晚场7：30-9：00练习；当时我又时间的流失，
			转眼冬季就到了。我在班里的冯佑璋的鼓励下，去二池（当时夏天可游泳，冬天开冰场）学习滑冰。只能在晚场7：30-9：00练习；当时我又</span>
	</div>
</div>

 

 

样式说明

1、img 图片应该是float:left，那么下面的div则会占据一行（包含img占用的位置）

2、首字下沉，将首字的字体设置大一点，必须为float : left，则右边的文字会占据空白的地方