样式小图库与关闭图标的Ionic应用程序

Question

我正在尝试创建一个小型图片库。

What I want: want - to - achieve

What I got up till now: Image-Up-Till-Now

如你所见

我有三个不同大小的图像，在右上角我想有一个X(图标)。

由于某些原因，图3上的最后一个图标与其他两个图标的位置不同。

这是我的代码:

JS:

   $scope.allImages = [
    "./img/ionic.png",
    "./img/background-test-black.png",
     "./img/background-test-black - Kopie.png"
  ];

HTML:

  <div>
        <ul>
        <li>
          <a ng-repeat="image in allImages">
          <img  ng-src="{{image}}" class="gallery "/>
            <i ng-click="deletePhoto(image)" class="icon ion-close delete"></i>
          </a>
        </li>
      </ul>
    </div>

CSS:

.gallery {
  width: 25%;
  height: 70%;
  padding: 5px;
  margin-left: 0;
  vertical-align: top;
}
.delete {
  position: absolute;
  font-size: 28px;
  color: red;
  margin-left: -15px;
}

提前感谢!

Answer 1

我认为你应该使用相对而不是绝对。