CSS在图像右上角定位图标

我试图从图像右上角（不是框）中的bootstraps sprite定位close图标。我从一个实例中拿出了这个，但它不适合我。它总是在盒子外面和屏幕的右下角结束。CSS在图像右上角定位图标

我该如何解决这个问题？我已经设置了一个小提琴，但无法弄清楚如何在那里得到精灵。你能帮我吗？

<!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>

来源

2014-08-29 Norman

缩略图的大小总是一样吗？（90X90） – misterManSam 2014-08-29 07:37:38

缩略图宽度始终为150px。高度可以是任何东西。 – Norman 2014-08-29 07:38:50

对不起，我的意思是实际的''大小？ – misterManSam 2014-08-29 07:39:35

这个例子可以拍摄任何高度的图像。

打开<i class="delete">成<div>
包裹<img>新删除DIV
给.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; 
}*/

来源

2014-08-29 08:48:39 misterManSam

我真的不明白为什么即使当我从你的例子中复制一切，我最终在我的本地机器上这样奇怪的结果... – Norman 2014-08-29 09:31:54

好的。得到它的工作。现在，我该如何让红色正方形的“'？ – Norman 2014-08-29 09:45:44

它看起来像你应该使用第二个例子在我的答案 - “没有删除伪元素的例子”，并将类放在该'':) :) – misterManSam 2014-08-29 10:10:05

0

/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; }

了Exa mple：http://jsfiddle.net/eugbrqwc/17/

你不需要在.delete的高度，宽度和背景 - 只为展示目的

来源

2014-08-29 06:51:09 grow

+0

我认为他想要“在图像的右上方（而不是框）”。 – 2014-08-29 06:52:08

+0

这是正确的在框的右上角。我试图把它放在图像的右上角。 – Norman 2014-08-29 06:54:45

+0

你去那里：http://jsfiddle.net/eugbrqwc/16/ – grow 2014-08-29 07:04:09

0

您需要设置position:relative;到.image格，然后设置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元素中添加了一些文本。

来源

2014-08-29 07:05:11

0

在图像和图标周围添加一个包装<div>，将其设置为display: inline-block和position: relative。它的大小将与图像一致，同时允许图标完全位于右上角。

来源

2014-08-29 07:09:50 flowstoneknight

+0

我正在尝试你的建议，但图标结束在所有奇怪的地方... – Norman 2014-08-29 07:28:23

0

您好我创建了小提琴的一个分支，我已经解决了它。 http://jsfiddle.net/bkx1dnsb/1/

您需要Position:relative on the image class

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

使用顶部&从删除类的权利修补定位。

它正在进入右上角的原因是绝对位置相对于浏览器窗口。除非您在绝对定位元素的父级上设置相关位置。

希望有帮助

来源

2014-08-29 09:09:52

CSS在图像右上角定位图标

回答

相关问题