小div佈局之卡片堆疊（card-stacking）

前端的頁面佈局和各種效果真是讓人眼花繚亂，公司的設計師恨不得在一個網站上把前端的佈局和樣式效果都用一遍。

如何實現下麵這種佈局效果？我給這種佈局效果起了個名字，叫做小div佈局之卡片堆疊。然後我百度了下，還真有這種堆疊效果的實現，比如這個比如這個：jQuery和CSS3炫酷堆疊卡片展開和收縮特效。google下card stacking，發現了個這個Effects for Card Stacks。當然，上面兩個網址上的效果都比較複雜，我這裡的需求簡單，只要實現下麵的效果就好。

話不多說，上代碼：

 1 <style>
 2   .container {
 3     margin: 50px auto;
 4     width: 328px;
 5   }
 6   
 7   .box {
 8     background: #f7f7f7;
 9     position: relative;
10   }
11   
12   .box-content {
13     padding: 20px;
14     width: 70%;
15   }
16   
17   .box-content-title {
18     margin: 0 0 10px;
19   }
20   
21   .box-content-desc {
22     -webkit-box-orient: vertical;
23     color: #333;
24     display: -webkit-box;
25     font-size: 14px;
26     line-height: 1.5;
27     -webkit-line-clamp: 4;
28     margin-bottom: 30px;
29     overflow: hidden;
30     text-overflow: ellipsis;
31   }
32   
33   .box-content-link {
34     color: #006ec8;
35     font-size: 14px;
36     text-decoration: none;
37   }
38   
39   .box-content-link:hover {
40     text-decoration: none;
41   }
42   
43   .box-img {
44     position: absolute;
45     right: -38%;
46     top: 20px;
47   }
48 </style>
49 <div class="container">
50   <div class="box">
51     <div class="box-content">
52       <h5 class="box-content-title">A公司</h5>
53       <div class="box-content-desc">A公司是B公司的重要戰略伙伴，致力於為C行業提供一站式 解決方案，目前處於高速發展期。公司旗下有四個事業部，業務主要涵蓋以下三個方面，2016年公司 年營業額達到100萬元。
54       </div>
55       <a class="box-content-link" href="javascript:void(0);">查看 >></a>
56     </div>
57     <img class="box-img" src="../../asset/images/logo/obama-card196x172.jpg" alt="">
58   </div>
59 </div>

說來其實很簡單，.box的子元素.box相對定位，加背景色；.box-content正常排布，用width和padding來控制其子元素的位置；.box-img絕對定位，用right和top來控制位置，基本就可以實現所要的效果。