如何在挠性物品中定位div？
如何在挠性物品中定位div？
提问于 2022-10-31 09:47:03
因为我搞不对，所以我的问题是：
我的DOM看起来是这样的：
<div id="content">
<div class="listitem">
<img class="thumbnail"/>
<div class="option_icon"></div>
</div>
<div class="listitem">
<img class="thumbnail"/>
<div class="option_icon"></div>
</div>
</div>CSS：
#content {
position: absolute;
overflow: auto;
width: 100vw;
top: var(--header-height);
left:0;
bottom: var(--footer-height);
display: flex;
flex-direction: row;
place-content: start;
}
.listitem {
width: var(--image-size);
height: var(--image-size);
display: flex;
flex-direction: row;
}
.thumbnail {
align-self: flex-start;
height: var(--image-size);
width: var(--image-size);
}
.option_icon {
height: calc(var(--icon-size)*0.75);
width: calc(var(--icon-size)*0.75);
background-color: grey;
mask-image: url("icons/options.svg");
position: absolute;
align-self: flex-end;
z-index: 999;
}我想要实现的是，选项图标粘在每个缩略图的右下角(就像一个带有正方形图片的图片库视图，每个选项图标位于右下角。)
这适用于第一列，但由于选项div不受曲目的弹性网格的影响，所有图标都被堆放在第一列中，而不是与其兄弟姐妹一起传播。我将附上一个图像，以使当前的状态更加清楚。
如何使红色选项图标与正确分布的兄弟姐妹呆在一起？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-31 10:08:16
我已经取得了你想要的结果，做了以下工作。
我在.listitem中添加了相对于绝对项的位置。然后，我简单地添加了right: 0，将其放置在右侧。
#content {
position: absolute;
overflow: auto;
width: 100vw;
left: 0;
display: flex;
flex-direction: row;
place-content: start;
}
.listitem {
width: 60px;
height: 60px;
display: flex;
position: relative;
flex-direction: row;
}
.thumbnail {
align-self: flex-start;
height: 60px;
width: 60px;
}
.option_icon {
height: 20px;
width: 20px;
background-color: grey;
mask-image: url("icons/options.svg");
position: absolute;
align-self: flex-end;
z-index: 999;
right: 0;
}<div id="content">
<div class="listitem">
<img class="thumbnail" />
<div class="option_icon"></div>
</div>
<div class="listitem">
<img class="thumbnail" />
<div class="option_icon"></div>
</div>
</div>
如果这不是你想要的结果，让我知道，我会再调查的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74261436
复制相关文章
相似问题
腾讯云开发者
