Javascript 如何在不同大小图像的角上动态放置按钮？CSS

我有各种不同大小的图像，我在左上角和右上角叠加了一个按钮

“左”按钮可以，因为图像是左对齐的，但“右”按钮不一致

在Chrome中，按钮显示在IE中图像的右上角（正确），按钮显示在包含div的右上角（不正确）

见附件，有什么想法吗

HTML:

即：

铬：

---

我想你是走错了路。您应该尝试使用positionCSS属性来处理这个问题。看

---

这应该将该div放在它的第一个相对父对象的右上角，如前面所述：

relative

/

absolute

和

text align last

可以一起使用

。结果{
显示：内联块；
位置：相对位置；
}
.结果{
位置：绝对位置；
顶部：0.5em；
左：0.5em；
右：0.5em；
文本最后对齐：对齐；
颜色：蓝色；
;
}

---

将图标容器绝对放置在图像上方，并按照您的意愿对齐图标

。结果{
显示：内联块；
位置：相对位置；
}
.结果{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
显示器：flex；
证明内容：之间的空间；
}
我{
边缘：.5em；
颜色：白色；
}

在相对定位的父级中使用绝对定位。试图用负的利润率来推动事情，这很容易出错

正文{
保证金：0；
显示器：flex；
}
.组{
利润率：10px 5px；
位置：相对位置；
}
.选项.选项{
位置：绝对位置；
宽度：20px；
高度：20px；
}
.选项.书签{
顶部：5px；
左：5px；
背景色：丽贝卡紫；
}
.options.info{
顶部：5px；
右：5px；
背景色：印度红；
}

---

我会在按钮上使用绝对定位。该图像将填充相对定位的包装div的宽度，然后只需使用left:0（或任意值）和right:0绝对定位按钮。现在你通过向左拉和向右拉使它们浮动。您将需要相对定位包装器，以使绝对正确工作。看

.结果{
显示：内联块；
位置：相对位置；
}
.ResultTopionBookmark、.ResultTopionInfo{
位置：绝对位置；
填充物：5px；
排名：0；
}
.ResultTopionBookmark{
左：0；
}
.ResultTopionInfo{
右：0；
}

.resultOptions应设置为绝对值，文本最后对齐：justify…&。结果相对。在图标的相对定位容器中使用绝对定位，而不是负边距。假设-1表示它不正确或不回答问题，此答案有什么错？

<div class="center-block results">
   <img src="../assets/dataworks/img/card-test.png" class="img-responsive draggable" />
   <div class="resultOptions">
      <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
      <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
   </div>
</div>

.results {
   display: inline-block;
}

.resultOptions {
   position: relative;
   display: block;
   width: 80%;
}

.resultOptions i {
   position: relative;
   padding: 5px;
   margin-top: -120px;
}

for your right top icon
.resultOptions-left {
   position: absolute;
   top:0px;
   right:0px;
}
for your left top icon
.resultOptions-right {
   position: absolute;
   top:0px;
   left:0px;
}

<div class="center-block results">
  <img src="http://via.placeholder.com/350x150" class="img-responsive draggable" />
  <i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
  <i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>

.results {
   display: inline-block;
   position:relative;
}

.resultOptionBookmark, .resultOptionInfo {
   position: absolute;
   padding: 5px;
   top:0;
}

.resultOptionBookmark{
  left:0;
}

.resultOptionInfo{
  right:0;
}