html - 如何在下面的演示右侧添加图像？

Question

我在 CSS 技巧中发现了一篇很棒的 HTML 和 CSS 堆叠卡片文章。在那个演示中没有图像，但我想在下面的代码中在卡片的右侧添加图像，附上图像以供引用。我尽我所能尝试，但我无法使它看起来像我所附的图像。谁能帮帮我？

.wrapper {
     margin-top: 100px;
     padding-top: 150px;
     padding-bottom: 1000px;
     max-width: 700px;
     margin: 0 auto;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
 .card1, .card2, .card3, .card4, .card5, .card6, .card7 {
     top: 30px;
     position: sticky;
     border: 1px solid #ccc;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
     background-color: white;
     color: #333;
     padding: 40px;
     border-radius: 10px;
     margin-bottom: 20px;
   height: 380px;
}
 
 .card1:nth-child(1n) {
     top: 20px;
}
 .card2:nth-child(2n) {
     top: 40px;
}
 .card3:nth-child(3n) {
     top: 60px;
}
 .card4:nth-child(4n) {
     top: 80px;
}
 .card5:nth-child(5n) {
     top: 100px;
}
 .card6:nth-child(6n) {
     top: 120px;
}
 .card7:nth-child(7n) {
     top: 140px;
}
 .card:nth-child(8n) {
     top: 160px;
}
.card1{
    background-color: #CAC5F5;
}
.card2{
    background-color: #C0FFD6
}
.card3{
    background-color: #FCF4B0
}
.card4{
    background-color: #FFB1B0
}
.card5{
    background-color: #8AC9FF
}
.classname {
    background-color:#44c767;
    
text-indent:0;
    display:inline-block;
    color:#ffffff;
    font-size:15px;
    font-style:normal;
height:50px;
    line-height:50px;
width:140px;
    text-decoration:none;
    text-align:center;
}.classname:hover {
    background-color:#5cbf2a;
}.classname:active {
    position:relative;
    top:1px;
}

<div class="wrapper">
  <div class="card1">
    <h2><span>Project #1</span>Title of the Project</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
    <a href="#" class="classname">Know More</a>
    
 
    
  </div>
  <div class="card2">
    <h2><span>Project #2</span>Title of the Project</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
  </div>
  <div class="card3">
    <h2><span>Project #3</span>Title of the Project</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
  </div>
  <div class="card4">
    <h2><span>Project #4</span>Title of the Project</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
  </div>
  <div class="card5">
    <h2><span>Project #5</span>Title of the Project</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
  </div>
 
 
</div>

Answer 1

我制作了两个 DIV 元素 .image 和 .left (您会在 CSS 的底部找到它们) 用于定位内容和照片

.wrapper {
    margin-top: 100px;
    padding-top: 150px;
    padding-bottom: 1000px;
    max-width: 700px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.card1,
.card2,
.card3,
.card4,
.card5,
.card6,
.card7 {
    top: 30px;
    position: sticky;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
    color: #333;
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 20px;
    height: 380px;
}

.card1:nth-child(1n) {
    top: 20px;
}

.card2:nth-child(2n) {
    top: 40px;
}

.card3:nth-child(3n) {
    top: 60px;
}

.card4:nth-child(4n) {
    top: 80px;
}

.card5:nth-child(5n) {
    top: 100px;
}

.card6:nth-child(6n) {
    top: 120px;
}

.card7:nth-child(7n) {
    top: 140px;
}

.card:nth-child(8n) {
    top: 160px;
}

.card1 {
    background-color: #CAC5F5;
}

.card2 {
    background-color: #C0FFD6
}

.card3 {
    background-color: #FCF4B0
}

.card4 {
    background-color: #FFB1B0
}

.card5 {
    background-color: #8AC9FF
}

.classname {
    background-color: #44c767;

    text-indent: 0;
    display: inline-block;
    color: #ffffff;
    font-size: 15px;
    font-style: normal;
    height: 50px;
    line-height: 50px;
    width: 140px;
    text-decoration: none;
    text-align: center;
}

.classname:hover {
    background-color: #5cbf2a;
}

.classname:active {
    position: relative;
    top: 1px;
}

.left {
    position: relative;
    margin-right: 50%;
}

.image {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 50%;
    overflow: hidden;
    border-radius: 0 10px 10px 0;
}

<div class="wrapper">
    
    <div class="card1">
        <div class="left">
            <h2><span>Project #1</span>Title of the Project</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
                commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
                laborum
                ad a sequi!</p>
            <a href="#" class="classname">Know More</a>
        </div>
        <div class="image">
            <img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
        </div>

    </div>
    <div class="card2">
        <div class="left">
            <h2><span>Project #2</span>Title of the Project</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
                commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
                laborum
                ad a sequi!</p>
        </div>
        <div class="image">
            <img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
        </div>
    </div>
    <div class="card3">
        <div class="left">
            <h2><span>Project #3</span>Title of the Project</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
                commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
                laborum
                ad a sequi!</p>
        </div>
        <div class="image">
            <img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
        </div>
    </div>
    <div class="card4">
        <div class="left">
            <h2><span>Project #4</span>Title of the Project</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
                commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
                laborum
                ad a sequi!</p>
        </div>
        <div class="image">
            <img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
        </div>
    </div>
    <div class="card5">
        <div class="left">
            <h2><span>Project #5</span>Title of the Project</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
                commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
                laborum
                ad a sequi!</p>
        </div>
        <div class="image">
            <img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
        </div>
    </div>

</div>