绝对位置在可变宽度父 div 内答案

【问题标题】：absolute position right inside variable width parent div绝对位置在可变宽度父 div 内
【发布时间】：2016-04-08 17:24:38
【问题描述】：

我有一个子 div，我希望将其定位为绝对位于右上角。

默认情况下它在左侧。

父 div 的宽度可变，取 div 内图像的宽度。

例子here

我不能使用左边距，因为父 div 的宽度是可变的。

同样使用 calc 失败，因为 100% 占用了页面宽度。

html -

<div class="pic">
<div class="imgc">
<img src="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="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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：