Html 为每个图像应用固定的px单位

我有一张卡的图像，我需要重复它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>

导出默认值{
}
特里帕克先生{
显示器：flex；
img{
宽度：80px；
高度：100px；
位置：相对位置；
}
}

我想要这样的东西：

<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>

---

谢谢大家。

除了第一张图片

：not（：first child）

所以删除它

：style=“{'left'：-index*30}”

.triPack{
显示：flex；}
img{
宽度：80px；
高度：100px；
位置：相对位置；
}
img：不是（：第一个孩子）{
左边距：-45px；
}

将其与头寸设置保持一致，只需添加负保证金lefttell即可获得更多帮助