Card stacking of small div layout (card-stacking)

The front-end page layout and various effects are really dazzling. The company’s designers can’t wait to use all the front-end layout and style effects on one website.

How to achieve the following layout effect? I gave this layout effect a name, called card stacking of small div layout. Then I searched on Baidu and found out that there is really such a stacking effect, such as this one: jQuery and CSS3 cool stacking card expansion and contraction effects. I googled card stacking and found this Effects for Card Stacks. Of course, the effects on the above two URLs are relatively complicated. My needs here are simple, as long as the following effects are achieved.

Not much to say, here’s the code:

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

It’s actually very simple. The sub-element of .box, .box, is positioned relatively and adds a background color; .box-content is arranged normally and controlled by width and padding. The position of its child elements; .box-img absolute positioning, using right and top to control the position, you can basically achieve the desired effect.