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-5，这或多或少是我可以展示的地方一些产品细节。现在，使用此 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;
}

div-two、div-three、div-four 基本上以 div-one 所在的 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 元素放在网页上彼此下方