css实现并列效果

最新推荐文章于 2024-08-02 11:47:49 发布

dingchunyi2321

最新推荐文章于 2024-08-02 11:47:49 发布

阅读量483

点赞数

原文链接：http://www.cnblogs.com/terminator404/p/5459097.html

版权

<a href="#" class="mj-picList">
    <div class="mj-picList-pic" style="background-image:url(http://www.superslide2.com/demo/images/pic1.jpg)">&nbsp;</div>
  <div class="mj-picList-info">
    <b class="mj-picList-b">加快修订等规章加快修订等规章加快修订等规章</b>
    <p class="mj-picList-p">加快修订《北京市社会抚养费征收管理办法》等规章</p>
  </div>
</a>

/* 图文并排 */
.mj-picList-pic{position: absolute;left: 0;top: 0;width: 80px;height: 80px;background-position: center center;-webkit-background-size: cover;
background-size: cover;}
.mj-picList{overflow: hidden;display: block;height: 80px;position: relative;text-decoration: none;color: #444;}
.mj-picList-info{margin-left: 90px;padding-right: 5px;}
.mj-picList-b{font-weight: normal;color: #444;display: block;white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;font-size: 14px;line-height: 30px;}
.mj-picList-p{margin: 0;padding: 0;line-height: 23px;color: #999;font-size: 12px;}
.mj-picList:hover{background:#f1f1f1;}