이미지의 오른쪽 상단 모서리에 닫기 아이콘을 설정하십시오.

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

, 그것은

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

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

이 도움을 드리겠습니다.