Making A Close Image Appear On Top Right Corner Of A DIV

问题

I wanted to know how to make a small cross (close) image appear on the top right inside of a div. Using CSS and XHTML. Thanks

回答1:

You could do it this way: jsfiddle.net/7JEAZ/1317

Code snippet:

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

回答2:

In-case its any help, here is another example with the close button over the top right corner of the DIV, the code is an example showing it with two different sized div's and the jQuery to close the parent div of the image clicked. There is also a link to reshow the 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();
});

An example: click here

回答3:

this simple example may help. =]

HTML

<div class="thumbnail">
    <img src="http://96pix.com/images/renee-v.jpg" />
    <a href="#" id="close"></a>
</div>

CSS

.thumbnail {
    position: relative;
   width:300px;
   height:300px;
}

.thumbnail img {
    width:100%;
    height:100%;
}

#close {
    display: block;
    position: absolute;
    width:30px;
    height:30px;
    top: 2px;
    right: 2px;
    background: url(http://icons.iconarchive.com/icons/kyo-tux/delikate/512/Close-icon.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Example: http://jsfiddle.net/PPN7Q/26/

来源：https://stackoverflow.com/questions/5088643/making-a-close-image-appear-on-top-right-corner-of-a-div

标签

jquery

html

css

xhtml