小 div レイアウトのカード スタッキング (カード スタッキング)

フロントエンドのページ レイアウトとさまざまな効果は本当に素晴らしく、同社のデザイナーはすべてのフロントエンド レイアウトとスタイル効果を 1 つの Web サイトで使用するのが待ちきれません。

次のレイアウト効果を実現するにはどうすればよいですか?私はこのレイアウト効果に、小さな div レイアウトのカードスタッキングと呼ばれる名前を付けました。そこで Baidu で検索したところ、実際にこのスタッキング効果の実装があることを知りました。たとえば、jQuery と CSS3 のクールなスタッキング カードの拡張および縮小効果です。カード スタックについて Google で検索したところ、このカード スタック用エフェクトを見つけました。もちろん、上記の 2 つの 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/imghwm/default1.png"  data-src="../../asset/images/logo/obama-card196x172.jpg"    alt="">
  </div>
</div>

これは実際には非常に単純です。.box.box の子要素は相対的に配置され、背景色を追加します。.box-content は通常どおりに配置され、幅によって制御されます。子要素の位置、 .box-img の絶対配置、right と top を使用して位置を制御すると、基本的に目的の効果を実現できます。