在图像的右上角设置关闭图标[重复]答案

【问题标题】：Set a close icon in the top right corner of an image [duplicate]在图像的右上角设置关闭图标[重复]
【发布时间】：2016-11-03 19:31:48
【问题描述】：

我有一个使用 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>

【问题讨论】：

标签： html css angularjs

【解决方案1】：

在图像父 div 中添加类并做 CSS。见下面sn-p。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

为这个例子的抖动添加一个类到父类：

<div ng-repeat="file in imagefinaldata" class="parent">
    <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>

你的风格可以让我这样：

.parent {
  display: inline;
  position: relative;
  width: 100%;
  height: auto; // Or your height
}
.parent img.close {
  position: absolute;
  right: 0;
  top: 0;
  height: 21px;
  width: 21px;
}

当然可以根据您的需要更改此样式。没有示例可以准确地为您提供尺寸。

【讨论】：

【解决方案4】：

请查看此链接Switching the order of block elements with CSS

也许有帮助

但你可以在 css 中使用位置规则来做到这一点

使用这个 CSS 代码：

.imagefinaldata{position:relative;}
.imagefinaldata .close{width:21px;height:21px;position:absolute;left:3px; top:3px;}
.imagefinaldata img:first-child{margin-top:30px;}

我希望得到这个帮助

【讨论】：