我有一张卡片图像,我需要重复它 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>
我想要这样的东西:
谢谢你们。
最佳答案
除了第一张图片 :not(:first-child)
margin-left
来做到这一点
所以删除它 :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="/image/XG0gL.png" alt="">
<img src="/image/XG0gL.png" alt="">
<img src="/image/XG0gL.png" alt="">
<img src="/image/XG0gL.png" alt="">
</div>
关于html - 为每个图像应用固定的 px 单位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51943954/