0

下面是我的一个简单页面的代码。我正在尝试（A）顶部的横幅，其中包含徽标，右侧的标题，然后是“登录/注册”链接，（B）在所有这些下方，然后我将获得主要文本网站。

我希望顶部的正文和横幅之间有很大的差距。所以我用 div 来划分页面。但是，当我对#main 应用“margin-top”以使横幅保持一定距离时，所有内容，即正文和横幅中的所有内容都会在页面下方移动。如果我将“margin-bottom”应用于标题元素，也会发生同样的事情。

我对 CSS 和 HTML 有点陌生，但我虽然在此之前我已经掌握了它。我已经为此挠头很久了，但我似乎根本无法理解这里的定位！

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <meta charset="utf-8"/>
  <title>My Page</title>
</head>

<body>
<header id="masthead" role="banner">
  <img src="jep.jpeg" alt="My Page">
  <h2>Welcome!</h2>
  <p><a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a></p>
</header>

<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>

这是CSS代码：

#masthead {
position: relative;
}

#masthead img {
position: absolute;
}

#masthead h2 {
position: absolute;
left: 150px;
}

#masthead p {
position: absolute;
right: 10px;
}

#main {
margin-top: 40px;
}
4

3 回答 3

1

问题是所有的absolute定位都会从文档流中移除元素。这意味着您的标题的高度为 0px，但所有内容仍然相对于它定位。

只需给您的标头广告一个高度。

JSFiddle

于 2013-03-07T21:02:36.453 回答
0

您只需将元素包装在它们自己的容器中，这样您就可以更好地定位它们。您可能还想在其中定义一些高度。包括一个高度#masthead

假设您需要响应式设计：

<header id="masthead" role="banner">
  <section class="logo">
    <img src="jep.jpeg" alt="My Page">
  </section>

  <section class="title">
    <h2>Journal of Electronic Publishing</h2>
  </section>

  <section class="sign-in">
    <a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a>
  </section>
</header>

.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}

.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}

.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}

请注意，总 100% 是假设您在该计算中包括边距。所以，30+30 = 60 + 5 + 5 = 70 + 30 = 100%

编辑：现在我可以看到您的 CSS，您的具体问题是使用 position:absolute;。删除这些应该会让你走上正确的道路。

于 2013-03-07T20:39:28.300 回答
0

我建议使用表格布局。有些人不赞成使用 1 行表进行样式设置，但这似乎可行：

HTML：

<body>
<header id="masthead" role="banner">
  <table>
    <tr>
      <td><img src="jep.jpeg" alt="My Page"></td>
      <td><h2>Welcome!</h2></td>
      <td><p><a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a></p></td>
    </tr>
  </table>
</header>

<div id="main" role="main">
    <p>Testing</p>
</div>
</body>
</html>

和 CSS：

#masthead {
width: 100%;
}

#masthead table {
width: 100%;
}

#main {
margin-top: 40px;
}

编辑：使用divs。

这有点混乱，但它有效。自从我使用 div 进行这样的定位以来已经有一段时间了。

HTML：

<body>
<header>
    <div class="col">
      <div class="content">
           <img src="jep.jpeg" alt="My Page">
      </div>

      <div class="content">
        <h2>Welcome!</h2>
      </div>

      <div class="content">
        <p><a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a></p>
      </div>

    </div> 
</header>

<div id="main" role="main">
    Testing
</div>
</body>
</html>

CSS：

header {
width: 100%;
}

.col {
height: 100px;
position: relative;
}

.content {
float: left;
width: 33.3%;
}

#main {
margin-top: 50px;
}
于 2013-03-07T20:53:43.543 回答