图文混排

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

 

先看看例子

<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张图片

 

样式说明

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

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

 

 

 

你可能感兴趣的:(图)