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-一个是占据整个屏幕的全尺寸图像，当用户向下滚动时，他可以看到另一个全屏div-5，这或多或少是我可以展示一些产品细节的地方。现在，使用此css :a部件呈现的方式是存在水平滚动条。

更新：

.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;
}

div-2，div-3，div-4基本上是打开的，宽度为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元素放在彼此下面。