Question

我有两个部分堆叠。我在容器position:relative上使用div，然后在子position:absolute上使用div来相对于父容器的顶部定位它们。

这是我的代码（也在此JSFiddle上）：

＆＃13;

html,body{height: 100%; width: 100%;}

h1{
  font-size: 20px;
  font-family: 'Avenir', sans-serif;
  color: #212121;
} 

h2{
  font-size: 18px;
  font-family: 'Avenir', sans-serif;
  font-weight: lighter;
  color: #424242;
}

p{
  font-family: 'Avenir', sans-serif;
  font-size: 18px;
}

.container{
  position: relative;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

#header{
  position: absolute;
  top: 10px;
  max-width: 960px;
  line-height: 30px;
}

#header h1{padding-top: 5px;}
#header {max-width: 800px;}

#projects{
  position: absolute;
  top: 240px;
}

＆＃13;

<div class = "container">
  <section id = "header">
    <h1>Name Lastname</h1>
    <h2>Description, Description</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod non metus id semper. Integer volutpat, mauris vitae pulvinar rhoncus, lacus lectus euismod augue, sit amet interdum lectus leo et magna. Curabitur in tellus vel tellus finibus faucibus quis sit amet risus. Etiam id sagittis ligula. Ut facilisis, nisi eu.!
    </p>
  </section>

  <section id = "projects">
    <p>Another paragraph on projects</p>
  </section>

</div>

＆＃13;

我正在尝试使页面响应，但是当我减小页面的宽度时，标题div（顶部）会进入底部项目div，这使得它难以辨认。

如何在两个div之间创建一个恒定的间距？

Answer 1

如上述评论中所述，答案是删除position: absolute;。父容器中的默认流将用于子div要堆叠。然后，您可以使用margin-top或margin-bottom调整子div之间的间距。

如何在两个部分之间响应性地创建恒定的边距/填充？

1 个答案: