我正在创建一个div,必须在右上角有一个关闭按钮,就像在图像中
image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg
image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg
第一张照片是在photoshop中制作的.我试图做同样的,但是使用CSS. “Fechar”是关闭按钮(葡萄牙语).使用干净的CSS和Web标准,什么是更好的方式正确定位它没有解决方法？
这是我的代码：http://jsfiddle.net/wZJnd/
这是我能达到的.
解决方法
我会用相对定位的#header中的绝对定位：
HTML
<div id="header"> <h1>Your Title</h1> <a href="" class="close">Close</a> </div>
CSS
#header {
width: 700px;
height: 200px
position: relative;
text-align: center;
background: #000 url(the-logo.png) no-repeat 30px 10px;
}
#header .close {
position: absolute;
top: 20px;
right: 20px;
}
这将导致a.close链接使用#header作为其坐标系,并将其从顶部和右边缘定位20px.
在我的经验填充中,边距和浮动对渲染与定位的不一致和字体大小变化更为敏感.因此,尽可能使用位置.
