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在圖像右上角定位圖標

回答

相關問題