CSS 排列两个全宽 div 相互低沉

Question

我有两个div，它们的css如下所示：

.div-one:before {
  content: "";
  background: url("../../../assets/images/manhattan-min.png") center no-repeat;
  position: fixed;
  width: 100%;
  min-height: 100vh;
}
.div-one {
  width: 100%;
  height: 100vh;
}
.div-five{
  position: relative;
  background-color: brown;
  width: 100%;
  height: 100vh;
}

我基本上想把它设计成一个典型的登录页面，div-one 是占据整个屏幕的全尺寸图像，当用户向下滚动时，他可以看到另一个全屏div-five，这或多或少是我可以显示一些产品细节的地方。现在，使用此 css ：before 部分以水平滚动条的方式呈现。

更新：

.div-two {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div2 0.2s forwards;
  animation: left-to-right-div2 0.2s forwards;
}
.div-three {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}
.div-four {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}

二区，

三区，四区基本上打开，宽度为50%，而第一区在哪里。

Answer 1

您可以使用 display 属性：

.div-one:before {
  content: "";
  background: url("../../../assets/images/manhattan-min.png") center no-repeat;
  position: fixed;
  width: 100%;
  min-height: 100vh;
  display: block;
}
.div-one {
  width: 100%;
  height: 100vh;
  display: block;
}
.div-five{
  position: relative;
  background-color: brown;
  width: 100%;
  height: 100vh;
  display: block;
}

这应该将所有div元素放置在网页上彼此下方