작은 div 레이아웃의 카드 스태킹(card-stacking)

프런트 엔드 페이지 레이아웃과 다양한 효과가 정말 눈부십니다. 회사의 디자이너들은 하나의 웹사이트에서 모든 프런트 엔드 레이아웃과 스타일 효과를 사용하고 싶어합니다.

다음과 같은 레이아웃 효과를 얻으려면 어떻게 해야 합니까? 나는 이 레이아웃 효과에 작은 div 레이아웃의 카드 스태킹이라는 이름을 부여했습니다. 그런 다음 Baidu를 검색하여 실제로 이 스택 효과가 구현되어 있다는 것을 알았습니다. 예를 들어 jQuery와 CSS3의 멋진 스택 카드 확장 및 축소 효과가 있습니다. 카드 스택을 검색하여 카드 스택에 대한 효과를 찾았습니다. 물론 위의 두 URL에 대한 효과는 상대적으로 복잡합니다. 다음 효과가 달성되는 한 여기에서 필요한 것은 간단합니다.

코드는 다음과 같습니다.

<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 id="A公司">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 lazy"  src="/static/imghw/default1.png"  data-src="../../asset/images/logo/obama-card196x172.jpg"    alt="">
  </div>
</div>

실제로는 매우 간단합니다. .box.box의 하위 요소는 상대적으로 위치가 지정되고 배경색을 추가합니다. .box-content는 정상적으로 정렬되고 너비와 패딩은 하위 요소의 위치를 ​​제어하는 ​​데 사용되며 .box-img는 위치를 제어하는 ​​데 사용됩니다. 기본적으로 원하는 효과를 얻을 수 있습니다.