在图片右上角设置关闭图标

Question

我有一个使用 angularjs 的图像列表。我想在每张图片的右上角显示一个关闭图标图片。请帮助我处理 CSS，下面是列出图片的代码。

 <div ng-repeat="file in imagefinaldata" style="display:inline;">
    <img  height=200 width=250 data-ng-if="store.imageUrl !== ''" ng-src="{{store.imageUrl}}{{file}}"  class="imgResponsiveMax" alt=""/>
    <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png"  />
</div>

原文由 sunil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在图像父 div 中添加类并执行 CSS。请参阅下面的代码段。

 .img_wrp {
  display: inline-block;
  position: relative;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
}

 <div ng-repeat="file in imagefinaldata" class="img_wrp">
  <img height=200 width=250 src="https://wecision.com/images/wrc-1.png" class="imgResponsiveMax" alt="" />
  <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png" />
</div>

原文由 Krupal Patel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这个，它应该工作

 .img-container {
  display: inline;
  position: relative;
}
.close {
  position: absolute;
  right: 0;
}

 <div class="img-container" ng-repeat="file in imagefinaldata">
  <img height=200 width=250 data-ng-if="store.imageUrl !== ''" ng-src="{{store.imageUrl}}{{file}}" class="imgResponsiveMax" alt="" />
  <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png" />
</div>

原文由 Rahul 发布，翻译遵循 CC BY-SA 3.0 许可协议