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>

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>

Answer 2

试试这个，它应该有用

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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;
}

当然改变这种风格以满足您的需求。没有示例为您提供完全相同的尺寸。

Answer 4

请通过此链接Switching the order of block elements with CSS

获取looke

也许是它的帮助

但您可以使用css中的位置规则来执行此操作

使用此css代码：

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

我跳这个帮助

在图像的右上角设置关闭图标

4 个答案: