CSS定位 - 上和右

Question

我正在创建一个DIV，它必须像图像中那样在右上角有一个关闭按钮。 image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg 第一张图片是用Photoshop制作的。我正在尝试使用CSS做同样的事情。"Fechar"是关闭按钮（葡萄牙语）。使用干净的CSS和Web标准，没有变通方法，什么是更好的定位它的方法？

这是我的代码：http://jsfiddle.net/wZJnd/ 这是我能达到的最远的地方。

- Rodrigo Souza

Answer 1

我建议在相对定位的 #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作为其坐标系，并将其位置与顶部和右侧边缘保持20像素的距离。

根据我的经验，与填充、边距和浮动相比，定位更容易受到渲染不一致性和字体大小变化的影响。因此，我尽可能使用定位。

- Pat

---

太好了！我一直在寻找这个。我知道我必须使用position relative，但是我不知道只有放在相对定位的div中，.close才会像这样运行。顺便问一下，在徽标和标题之间如何消除换行？在这种情况下使用float:left是否正确？ - Rodrigo Souza

最简单的方法是将您的标志设置为<div class="head">容器的背景图像。然后，如果您将.head设置为100％宽度、块级元素，并使用text-align: center属性，这将使您的<h1>处于正确的位置，您可以在其上下方使用垂直填充来将其与.head容器的顶部和底部正确间隔。 - Pat

Answer 2

你可以进行以下操作：

img.close {
float:right;
margin:25px 25px 0 0;
}

- mike23

---

我还会浮动它。使用<code>position:absolute;</code>将允许关闭按钮与盒子("Cartao Fidelidada")的内容重叠，如果内容过大。浮动按钮会导致换行。 - opatut

Answer 3

我会在img周围使用div包装器

因此，您将为标题“div.header”创建一个div，其中包含以下div：

• div.logo：左侧包含img标记的徽标；
• div.title：页面标题；
• div.close：包含img标记的关闭按钮。

我更喜欢使用填充而不是边距属性。我认为它对于兼容性目的更有效。

- Nezrak