在DIV的右上角出现近距离图像

Question

我想知道如何让一个小的十字(近)图像出现在div的右上方.使用CSS和XHTML.谢谢

Answer 1

你可以这样做:jsfiddle.net/7JEAZ/1317

代码段:

#panel{
    width:100px;
    height:100px;
    background:red;
}
#close{
    display:block;
    float:right;
    width:30px;
    height:29px;
    background:url(https://web.archive.org/web/20110126035650/http://digitalsbykobke.com/images/close.png) no-repeat center center;
}

<div id="panel"><a id="close" href="#"></a></div>

Answer 2

在它的任何帮助的情况下,这是另一个例子,在DIV的右上角有关闭按钮,代码是一个示例,显示它有两个不同大小的div和jQuery来关闭点击图像的父div.还有一个链接来重新显示div.

CSS:

#content{
    border: solid black;   
    width: 70%;
}

#info{
    border: solid red;   
    width: 50%;
}

.close-image{
    display: block;
    float:right;
    position:relative;
    top:-10px;
    right: -10px;
    height: 20px;
}

HTML:

<a href="#" id="toggle-content">Show / Hide content</a>
<br/><br/>
<div id="content">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Content:</u></b><br/>
    This is the info inside the div!
</div>
<br/><br/>
<div id="info">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Info:</u></b><br/>
    Click the close button to hide this info!
</div>

jQuery的:

$(".close-image").click(function() {
    $(this).parent().hide();
});

$("#toggle-content").click(function() {
    $("#content").slideToggle();
});

一个例子:点击这里