Question

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

默认情况下，它位于左侧。

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

示例here

我不能使用margin-left，因为父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;
}

Answer 1

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

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

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

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

1 个答案: