图文混排一粒

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

条件及要求:

  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 文件