纯CSS卡对卡片的重叠效果 [英] Overlaping Effect on Cards with Pure CSS

问题描述

我正在处理类似于此示例的卡片列表: https://codepen.io/pkunzel/pen/xxgjrVg

I'm working on a list of cards similar to this example: https://codepen.io/pkunzel/pen/xxgjrVg

window.addEventListener("load", function() {
  let cards = document.querySelectorAll(".card");
  for (let i = 0; i < cards.length; i++) {
    cards[i].style.marginTop = (i * 30) + "px";
  }
});

.card {
  position: absolute;
}

.blue {
  background-color: cornflowerblue;
}

.green {
  background-color: darkolivegreen;
}

.red {
  background-color: lightcoral;
}

.orange {
  background-color: lightsalmon;
}

<div class="card-group">
  <div class="card blue">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card red">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card green">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card orange">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
</div>

但是在完成它之后，我无法摆脱纯粹使用CSS的感觉，我只是想不出如何以不同的方式实现它.有什么建议吗?

But after completing it I can't shake off the feeling it could purely with CSS, I just can't figure out how to implement it differently. Any suggestions?

推荐答案

CSS网格可以做到:

CSS grid can do it:

.card-group {
  display:grid;
  justify-content:start; /* fit content in width */
  grid-auto-rows:30px; /* a fixed height to create an overflow */ 
}
.card-group .card {
  align-self:start; /* disable the stretch alignment */
}
.blue {
  background-color: cornflowerblue;
}

.green {
  background-color: darkolivegreen;
}

.red {
  background-color: lightcoral;
}

.orange {
  background-color: lightsalmon;
}

<div class="card-group">
  <div class="card blue">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card red">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card green">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
  <div class="card orange">
    <p>Name: qwert</p>
    <p>Age: 99</p>
    <p>Address: qwertyuil</p>
  </div>
</div>

这篇关于纯CSS卡对卡片的重叠效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！