Question

我试图在图片的右上角（不是框中）定位来自bootstraps sprite的close图标。我从一个有效的例子中得到了这个，但它对我不起作用。它总是在盒子外面和屏幕的右下角结束。

我怎样才能做到这一点？我设置了一个小提琴，但无法想象如何在那里获得精灵。你能帮忙吗？

<!DOCTYPE HTML>
<html>
<head>
<link media="screen" type="text/css" href="icons.css" rel="stylesheet">
    <title>Delete Image Icon Dev</title>

<style>

img.thumbnail {
    background: none repeat scroll 0 0 #FFFFFF;
}

.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
    float: left;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
}

.image img {
    vertical-align: middle;
}

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

</style>

</head>

<body>
    <div class="image"><img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg"><i class="icon-remove blue delete"></i></div>
</body>

</html>

Answer 1

此示例可以拍摄任何高度的图像。

将<i class="delete">变为<div>
使用新删除div

<img>

在.image:before

min-height: 150px;

.image

删除

将position: relative应用于.delete
将删除按钮应用于.delete:after的伪元素，或放置另一个<i>以使其互动。

Have an example!

Example without the delete pseudo element

HTML

<div class="image"> 
    <div class="icon-remove blue delete">       
        <img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg">
        <!-- <i class="delete-button"></i> if you need to use a real element -->
    </div>  
</div>

CSS

.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    min-height: 150px;
}

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    float: left;
    margin-bottom: 10px;
    padding: 10px;
}

.delete {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

.delete:after {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}

/* If you need to use a real element remove .delete:after and use this  -- 
.delete .delete-button {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}*/

Answer 2

/ E

您需要更新标记：

<div class="image">
  <div class="img">
    <img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg" />
    <i class="icon-remove blue delete"></i>
  </div>
</div>

还有你的css：

img.thumbnail {
    background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
    content:"";
    display: inline-block;
    vertical-align: middle;
}
.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    float: left;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    vertical-align: middle;
}
.image .img {
    display: block;
    vertical-align: middle;    
    position: relative;
}
.delete {
    position:absolute;
    top:0;
    right:0;
    width: 10px;
    height: 10px;
    background: red;
}

示例：http://jsfiddle.net/eugbrqwc/17/

你不需要.delete中的高度，宽度和背景 - 仅用于显示目的

Answer 3

您需要将position:relative;设置为.image div，然后将top和right参数设置为.delete元素。

.image {
    /* Other rules here */
    position:relative;
}

.delete {
    /* Other rules here */
    position:absolute;
    top:30px;
    right:15px;
}

这里还有一个jsfiddle：http://jsfiddle.net/eugbrqwc/15/。我在.delete元素中添加了一些文字，只是为了让它可见。

Answer 4

在图片和图标周围添加包装<div>，将其设置为display: inline-block和position: relative。它的大小将符合图像，同时允许图标绝对定位在右上角。

Answer 5

嗨，我创造了你的小提琴的叉子，我已经解决了它。 http://jsfiddle.net/bkx1dnsb/1/

您需要Position:relative on the image class

没有图标所以我添加了一个X但你的图标将在同一个地方。

使用top＆amp;从删除类到修补定位。

它出现在右上角的原因是因为绝对位置是相对于浏览器窗口的。除非你在绝对定位元素的父元素上设置position releative。

希望有所帮助

CSS在图像的右上角定位图标

5 个答案: