过需求时一不留神，很爽快的接了个如下图的效果：

条件及要求：

  1. 图片宽度及高度不固定
  2. 分享给好友贴底
  3. 照片描述及分享给好友左侧距图片10px
  4. 照片描述由后台控制输出字数

等做起来发现还挺折磨人，本想下周甩他们一句做不了完事，不过考虑 200,000,000+ P-people  no jobs… 马上变得蛋定，上代码：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>图文混排</title>
<link href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" rel="stylesheet">
<style>
.feed{margin:10px;width:500px;}
.feed-img{float:left;position:relative;#zoom:1;margin-right:10px;_margin-right:7px;}
.feed-img img{vertical-align:top;}
.feed-img .act{position:absolute;bottom:0;left:100%;margin-left:10px;white-space:nowrap;}
</style>
</head>

<body>

<div class="feed">
	<div class="feed-img">
		<img alt="犀利哥" height="430" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="300">
		<p class="act"><a href="##">分享给网友乡民</a></p>
	</div>
	<div class="feed-text">
		<p>cool~</p>
	</div>
</div>

</body>

</html>

——————– 补充提醒分割线 ——————–
评论前确保您已看过减小 HTML 文件