在另一个元素上对齐元素答案

【问题标题】：Align element on another element在另一个元素上对齐元素
【发布时间】：2019-01-26 15:30:26
【问题描述】：

我在将“x”圆圈与图像的右上角对齐时遇到了一些问题，因为它的祖父级应用了溢出：隐藏样式。圆圈被截断，没有放在图像的角落。

我已经花了几个小时寻找合适的解决方案，但最终放弃了。

我想达到这样的效果。

这是我一直在尝试做的事情。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.existing-img-thumbnail {
	float: left;
	position: relative;
	width: 18%;
	padding-bottom: 18%;
	margin: 0.83%;
	overflow: hidden;
}

.existing-img-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

.existing-img-container img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: -5px;
    z-index: 1;
    font-size: 17px;
    left: 95%;
    top: 43%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <div class="existing-img-container">
                  <i class="ion-ios-close-circle delete-img clickable"></i>
                  <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

这是我的尝试。只需移动具有overflow:hidden的元素

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.existing-img-thumbnail {
	float: left;
	position: relative;
	width: 18%;
	padding-bottom: 18%;
	margin: 0.83%;
	/*overflow: hidden;*/
}

.existing-img-container {
	position: absolute;
	width: 100%;
	height: 100%;
overflow: hidden;
}

.existing-img-container img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: -5px;
    z-index: 1;
    font-size: 17px;
    left: 95%;
    top: 43%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <i class="ion-ios-close-circle delete-img clickable"></i>
               <div class="existing-img-container">

                  <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

【讨论】：

【解决方案2】：

尝试将图标放在溢出隐藏容器之外。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.existing-img-thumbnail {
	float: left;
	position: relative;
	width: 18%;
	padding-bottom: 18%;
	margin: 0.83%;
}

.existing-img-container {
	position: absolute;
	width: 100%;
	height: 100%;
  overflow: hidden;
  z-index: 1;
}

.existing-img-container img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: -5px;
    z-index: 2;
    font-size: 17px;
    left: 95%;
    top: 43%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <i class="ion-ios-close-circle delete-img clickable"></i> 
               <div class="existing-img-container">
                
                    <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

【讨论】：

【解决方案3】：

我完全改变了我的答案。我查看了您的结构，我认为重复结构重复了错误的元素。

我不是角度方面的专家，但对于这部分：<div ng-repeat="img in vm.existingImages" class="existing-img-gallery">，您基本上是在重复您的图片库容器 6 次，并且样式并不是专门为这种结构设计的。

你可以做的是：

<div class="existing-img-gallery">
    <div ng-repeat="img in vm.existingImages" class="existing-img-thumbnail">
        <div class="existing-img-container">
            <img class="clickable" ng-src="{{this.img.src}}" alt="...">
        </div>
        <i class="ion-ios-close-circle delete-img clickable"></i>
    </div>
</div>

这样你只有一个.existing-img-gallery，你有6个.existing-img-thumbnail里面的元素。然后您只需删除.existing-img-thumbnail 的overflow: hidden 规则。

我认为这将是对结构的改进，您将对样式有更多的控制权。

【讨论】：

这不会使 x 不被“切断”。
我编辑了代码并在 existing-img-thumbnail 和 existing-img-gallery 之间添加了另一个 div 容器。
我完全编辑了我的答案并修改了你的结构想法。是这样的吗？

【解决方案4】：

因此，如果您无法像其他答案所假设的那样摆脱overflow: hidden，这意味着您无法在外面为它腾出空间，那么除了在每个图块内部进行之外别无他法。

这个sn-p的主要区别：

图标实际上是唯一需要某种绝对定位的项目，因为它是唯一需要从其自然位置移动的项目。
每个图块内部的空间是使用existing-img-container 中的填充创建的，以便可以在角落上呈现图标而不进行裁剪。
existing-img-container 不需要绝对位置，这只会让您以后的事情变得更复杂。
您不需要使用变换来翻译图标，因为它已经是绝对定位的。
不需要对实际的img 标记做任何花哨的事情，只需强制宽度，以免它试图溢出图块。
您可能想在 flexbox 内稍微调整一下对齐方式，以完全按照您的想法分配它们。

PS：为了完整起见，提供了整个sn-p，但更改仅在css规则中。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function($uibModal){
  var vm = this;

  vm.existingImages = [
    { img: 1, src: 'https://66.media.tumblr.com/c5d1ac7b9669b3bbb20ebb8444cb702a/tumblr_nxrgstujWX1sfie3io1_1280.jpg'},
    { img: 2, src: 'https://ichef.bbci.co.uk/news/660/cpsprodpb/13284/production/_89586487_istock_000063166549_medium.jpg'  },
    { img: 3, src: 'https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2011/10/creativity-photographer.jpg'},
{ img: 4, src: 'https://images.unsplash.com/photo-1507290439931-a861b5a38200?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'},
    { img: 5, src: 'https://www.thenorthernecho.co.uk/resources/images/8861689/?type=responsive-gallery-fullscreen'},
    { img: 6, src: 'https://oddstuffmagazine.com/wp-content/uploads/2018/05/forest-in-Norway-650x908.jpg'},
  ];
})

.existing-img-gallery {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.existing-img-thumbnail {
    float: left;
    width: 18%;
    overflow: hidden;
}

.existing-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: flex-start;
}

.existing-img-container img {
    width: 100%;
}

i.ion-ios-close-circle.delete-img {
    position: absolute;
    right: 0px;
    z-index: 5;
    font-size: 17px;
    top: 0px;
    height: 100%;
    width: auto;
}

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
  </head>
  </head>

  <body>
    <div ng-controller="mainCtrl as vm">
      <div class="modal-body">
         <div ng-repeat="img in vm.existingImages" class="existing-img-gallery">
            <div class="existing-img-thumbnail">
               <div class="existing-img-container">
                  <i class="ion-ios-close-circle delete-img clickable"></i>
                  <img class="clickable" ng-src="{{this.img.src}}" alt="...">
                </div>
             </div>
          </div>
       </div>
    </div>
  </body>

</html>

【讨论】：

@LazioTibijczyk 我想你可能稍微误判了这里的意图。我并不是暗示其他方法本质上是不正确的，而是指出它们是基于这样的假设，即 OP 可以控制现有结构，如果不是 OP 的话，通常情况并非如此，当然对于其他会在某个时候达到这个问题的人。我只是提供一个不需要该控制的答案。这将如何等同于反对票真的超出了我的范围。干杯。
@LazioTibijczyk 我现在才意识到你是 OP。为您提供了一个可行的解决方案（并且是最一致的解决方案），该解决方案仅解决了问题中尚不完全清楚的问题，但仍需要某种努力，并且转化为您的反对票。祝你事业有成。
投反对票的原因是期望的结果并不完全是您的答案。我将其作为一种解决方法，但它完全改变了页面的布局。我知道它有效，但不完全是线程中描述的方式。不过，我很感谢您花时间提出这个问题，请不要把我的投票视为不好的事情，这表明它有点偏离我的想法，也可能偏离其他观众的预期效果。
不，不是，特别是如果您提出确实需要解决该问题的“潜在其他观众”。该解决方案提供了问题所要求的对齐方式。而且我不确定您所说的“更改页面布局”是什么意思，因为保持相同的结构正是该解决方案所提供的。如果您有其他类型的要求，您没有在问题中提及（您仍然没有澄清它是如何不按描述的方式工作的），那么我认为问题不在于答案，或者它应该等同于不满足这些要求而投反对票。
好吧，考虑一下“我想实现这种结果。（图像）”是问题的重要组成部分。无论如何感谢您的意见。