CSS div边距移动所有内容

Question

以下是我的简单页面代码。 我正在尝试在（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;
}

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 个解决方案

解决方案1
1 已采纳 2013-03-07 21:02:36

解决方案2
0 2013-03-07 20:39:28

解决方案3
0 2013-03-07 20:53:43

CSS div边距移动所有内容

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-03-07 21:02:36

解决方案2 0 2013-03-07 20:39:28

解决方案3 0 2013-03-07 20:53:43

解决方案1
1 已采纳 2013-03-07 21:02:36

解决方案2
0 2013-03-07 20:39:28

解决方案3
0 2013-03-07 20:53:43