> 웹 프론트엔드 > CSS 튜토리얼 > 작은 div 레이아웃의 카드 스태킹(card-stacking)

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

高洛峰
풀어 주다: 2016-11-21 13:31:06
원래의
2455명이 탐색했습니다.

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

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

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

코드는 다음과 같습니다.

<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는 정상적으로 정렬되고 너비와 패딩은 하위 요소의 위치를 ​​제어하는 ​​데 사용되며 .box-img는 위치를 제어하는 ​​데 사용됩니다. 기본적으로 원하는 효과를 얻을 수 있습니다.

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿