Question

以下是我的简单页面代码。我试图在（A）顶部有一个横幅，包括一个标志，一个右边的标题，然后是一个“登录/注册”链接，（B）下面所有这些然后我将有一个主要文本网站。

我希望顶部的主要文字和横幅之间有很大的差距。所以我将页面与div分开。但是当我将＃margin-top应用于#main以使横幅保持一定距离时，一切，即主要文本和我横幅中的所有内容都向下移动。如果我将“margin-bottom”应用于header元素，也会发生同样的事情。

我对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;
}

Answer 1

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

只需给你的标头高度。

JSFiddle

Answer 2

您只需将元素包装在自己的容器中，这样您就可以更好地定位它们。您可能还想在此定义一些高度。包括#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;。删除这些应该可以帮助您找到正确的路径。

Answer 3

我建议使用表格布局。使用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;
}

编辑：使用div s。

这有点乱，但它确实有效。已经有一段时间了，因为我已经将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;
}

CSS div与边缘移动一切

3 个答案: