Question

我正在创建一个div，它必须在右上角有一个关闭按钮，就像在图像中一样 image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg

第一张图片是在photoshop中制作的。我正在尝试使用CSS做同样的事情。 “Fechar”是关闭按钮（葡萄牙语）。使用干净的CSS和Web标准，没有解决方法正确定位它的更好方法是什么？

这是我能够达到的目标。

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作为其坐标系，并将其从顶部和右边缘定位为20px。

根据我的经验，填充，边距和浮动对渲染不一致和字体大小更改比定位更敏感。结果，我尽可能使用位置。

Answer 2

你可以做：

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

Answer 3

我会使用img

周围的div包装器

所以你的头文件“div.header”会有一个包含这些div的div：

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

我更喜欢使用填充而不是margin属性。我认为它更适合兼容性目的。

CSS定位 - 顶部和右侧

3 个答案: