html - 为每个图像应用一个固定的 px 单位

Question

我有一张卡片的图像，我需要重复 30 次，每次我想申请一张特定的卡片时都有一个左侧位置，因此它在停留在像甲板这样的位置之前与卡片重叠。

问题是，当我将左侧位置应用于图像卡时，它会将相同的左侧位置应用于所有卡，因此没有重叠位置。

所以我有这样的事情：

<template>
  <div class="triPack">
    <img :style="{'left': -index * 30}" v-for="index in 30" :key="index" src="../../assets/images/cardThemes/blue.png" alt="">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
  .triPack {
    display: flex;
    img {
      width: 80px;
      height: 100px;
      position: relative;
    }
  }
</style>

我想要这样的东西：

谢谢你们。

标签： htmlcssvue.js

Answer 1

margin-left除了第一张图片之外，您只能使用 css 来完成 :not(:first-child)

所以删除它:style="{'left': -index * 30}"

.triPack {
   display: flex;  }
img {
   width: 80px;
   height: 100px;
    position: relative;
    }
img:not(:first-child) {
margin-left: -45px;
}

 <div class="triPack">
    <img  src="https://i.stack.imgur.com/XG0gL.png" alt="">
    <img  src="https://i.stack.imgur.com/XG0gL.png" alt="">
    <img  src="https://i.stack.imgur.com/XG0gL.png" alt="">
    <img  src="https://i.stack.imgur.com/XG0gL.png" alt="">
    
  </div>