小div布局之卡片堆叠（card-stacking）-css教程-PHP中文网

小div布局之卡片堆叠（card-stacking）

高洛峰

发布： 2016-11-21 13:31:06

原创

2472 人浏览过

前端的页面布局和各种效果真是让人眼花缭乱，公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍。

如何实现下面这种布局效果？我给这种布局效果起了个名字，叫做小div布局之卡片堆叠。然后我百度了下，还真有这种堆叠效果的实现，比如这个比如这个：jQuery和CSS3炫酷堆叠卡片展开和收缩特效。google下card stacking，发现了个这个Effects for Card Stacks。当然，上面两个网址上的效果都比较复杂，我这里的需求简单，只要实现下面的效果就好。

话不多说，上代码：

<style>
  .container {
    margin: 50px auto;
    width: 328px;
  }
  
  .box {
    background: #f7f7f7;
    position: relative;
  }
  
  .box-content {
    padding: 20px;
    width: 70%;
  }
  
  .box-content-title {
    margin: 0 0 10px;
  }
  
  .box-content-desc {
    -webkit-box-orient: vertical;
    color: #333;
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 4;
    margin-bottom: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .box-content-link {
    color: #006ec8;
    font-size: 14px;
    text-decoration: none;
  }
  
  .box-content-link:hover {
    text-decoration: none;
  }
  
  .box-img {
    position: absolute;
    right: -38%;
    top: 20px;
  }
</style>
<div class="container">
  <div class="box">
    <div class="box-content">
      <h5 class="box-content-title">A公司</h5>
      <div class="box-content-desc">A公司是B公司的重要战略伙伴，致力于为C行业提供一站式 解决方案，目前处于高速发展期。公司旗下有四个事业部，业务主要涵盖以下三个方面，2016年公司 年营业额达到100万元。
      </div>
      <a class="box-content-link" href="javascript:void(0);">查看 >></a>
    </div>
    <img class="box-img" src="../../asset/images/logo/obama-card196x172.jpg" alt="">
  </div>
</div>

登录后复制

说来其实很简单，.box的子元素.box相对定位，加背景色；.box-content正常排布，用width和padding来控制其子元素的位置；.box-img绝对定位，用right和top来控制位置，基本就可以实现所要的效果。