私は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>
image parent 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>この例の揺れのために親にクラスを追加し、それは
.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>を動作するはずです、これを試してみてください。
<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;
}
もちろん、あなたのニーズに合わせてこのスタイルを変更してください。正確なサイズを提供する例はありませんでした。
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;}
私はこのヘルプをホップします
うまく動作します。 – sunil