Выровнять элемент по другому элементу - PullRequest
Новая
       5

Выровнять элемент по другому элементу

0 голосов
/ 11 декабря 2018

У меня возникли проблемы с выравниванием круга 'x' в правом верхнем углу изображения, потому что его дедушка переполнен: к нему применен скрытый стиль.Круг обрезается и не помещается в угол изображения.

Я уже часами искал подходящее решение, но просто сдался.

Я хочу добиться этоговроде результата.

enter image description here

Вот плункер того, что я пытался сделать. 

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>

Ответы [ 4 ]

0 голосов
/ 11 декабря 2018

Поэтому, если вы не можете уйти от overflow: hidden, как предполагают другие ответы, а это значит, что вы не можете освободить место для него снаружи, нет другого пути, кроме как сделать это внутри каждой плитки.

Ключевые отличия в этом фрагменте:

  • Иконка - действительно единственный элемент, который нуждается в каком-то абсолютном позиционировании, так как это единственная вещь, которую нужно переместить из естественного положения..
  • Пространство внутри каждой плитки, чтобы значок можно было рендерить в угол без обрезки, создается с отступом в existing-img-container.
  • . existing-img-container не требуется абсолютная позицияв будущем это только усложнит ситуацию для вас.
  • Вам не нужно переводить иконку с преобразованием, поскольку она уже находится в абсолютном положении.
  • Ничего особенного не нужно делатьк фактическому тегу img, просто задайте ширину, чтобы он не пытался переполнить плитку.
  • Возможно, вы захотите немного поиграть с выравниванием внутри flexbox, чтобы distriБейте их точно так же, как вы имели в виду.

PS: Предоставлен весь фрагмент кода для полноты, но изменения внесены только в правила 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>
0 голосов
/ 11 декабря 2018

Это моя попытка.Просто переместите элемент, который имеет 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>
0 голосов
/ 11 декабря 2018

Просто попробуйте разместить значок за пределами скрытого контейнера переполнения. 

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>
0 голосов
/ 11 декабря 2018

Я полностью изменил свой ответ.Я рассмотрел вашу структуру, и повторяющаяся структура, по моему мнению, повторяет неправильный элемент.

Я не эксперт по угловым направлениям, но с частью: <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 элементы внутри него.Затем вы просто удаляете правило overflow: hidden для .existing-img-thumbnail.

Я думаю, это улучшит структуру, и у вас будет больше контроля над стилями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...