<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>浮动模型</title> <style type="text/css"> .pic{float:left;} .p{float:left;} </style> </head> <body> <div class="mid"> <div class="pic"><img src="http://img.mukewang.com/55add9c50001040d06000338.jpg"></div> <div class="p"><a href="#">CSS圆角进化论</a><br> <p>CSS圆角的实现,经历了三大发展阶段:背景图片方式、CSS2.0+HTML标签模拟、CSS3.0圆角属性)。本案例详细讲解每一种的实现方式,并对实现的优缺点进行对比分析。 </p> </div> </div> </body> </html>
设置.pic{float:left;}
.p{float:left;}不能使图片和文字在同一行上,反而单独设置.pic{float:left}两者就可以实现,这是为什么,设置双浮动不是常用的方法,这里为什么不行?