Small div layout card stack (card-stacking)

Source: Internet
Author: User
Front-end page layout and a variety of effects is really dazzling, the company's designers want to be on a site to the front-end layout and style effects are used again.

How do I achieve the following layout effect? I have a name for this layout effect, called the small div layout card stack. Then I Baidu, there really is the implementation of this stacking effect, such as this: jquery and CSS3 cool stacked card expansion and contraction effects. Google card stacking, found an effects for Card Stacks. Of course, the above two URLs on the effect are more complex, I here the demand is simple, as long as the implementation of the following effect is good.

Words don't say much, on 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" > 

It's very simple, actually. The child element of box. Box relative positioning, add background color; box-content normal arrangement, with width and padding to control the position of its child elements; box-img absolute positioning, with right and top to control the position, the basic can achieve the desired effect.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.