वैरिएबल चौड़ाई पैरेंट div के अंदर सही स्थिति - एचटीएमएल, सीएसएस, सीएसएस 3

मैं एक बच्चा div हूँ जो मैं सही ऊपरी कोने पर होना निरपेक्ष होना चाहता हूँ।

डिफ़ॉल्ट रूप से यह बाईं ओर है।

पैरेंट डिव का एक वैरिएबल चौड़ाई होता है, जो डिव के अंदर एक इमेज की चौड़ाई को ले जाता है।

उदाहरण यहाँ

मैं एक मार्जिन-बाईं ओर का उपयोग नहीं कर सकता क्योंकि पैरेंट डिव एक चर चौड़ाई है।

साथ ही कैल्क का उपयोग करना 100% विफल रहा क्योंकि इसमें पृष्ठ की चौड़ाई ली जा रही है।

Html -

<div class="pic">
<div class="imgc">
<img src="/images/http://nvoids.in/dir/album_image/image_6642.jpeg" />
</div>
<div class="del">
<a href="#">X</a>
</div>
</div>

<div class="pic">
<div class="imgc">
<img src="/images/http://nvoids.in/dir/album_image/image_6638.jpeg" />
</div>
<div class="del">
<a href="#">X</a>
</div>
</div>

CSS कोड -

.imgc {
float:left
}

.del {
position:absolute;
float:right;
background-color:black;
color:white;
//display:none;
}
.del a {
color: white;
text-decoration:none;
}

.pic {
float:left;
}
.pic:hover .del {
margin-left: 10px;
display:block;
}

उत्तर:

.del {
position:absolute;
right:0;
top:0;
}

.pic {
float:left;
position:relative;
}

https://jsfiddle.net/kacmn38b/2/