CSS一个寻呼机布局

Question

我对一个寻呼机的基本布局很感兴趣.

这是我的代码:

section {
  position: relative;
  height: 100vh;
}

.section-single>.arrow {
  position: absolute;
  left: 50%;
  bottom: 10%;
}

.section-double>.content-left {
  width: 50%;
  float: left;
  background: gray;
}

.section-double>.content-right {
  width: 50%;
  float: left;
  background: black;
}

#section1 {
  background: green;
}

#section2 {
  background: red;
}

#section3 {
  background: yellow;
}

<section class="section-single" id="section1">
  <iframe src="https://www.youtube.com/watch?..."></iframe>
  <a href="#section2"><span class="arrow">section 2</span></a>
</section>
<section class="section-double" id="section2">
  <div class="content-left" id="div1">
  </div>
  <div class="content-right" id="div2">
</section>
<section class="section-double" id="section3">
  <div class="content-left" id="div3">
  </div>
  <div class="content-right" id="div4">
</section>

它应该是这样的:

正如您在css中看到的那样,每个部分都应该具有可用的全屏大小,并且div应该具有50%的页面.然而,div的定位无法正常运行(在后台propertie检查.section-double > .content-left 和.section-double > .content-right.

你能帮助我吗？

Answer 1

您可以使用flexbox进行此布局:

body {
  margin:0;
}
.container {
  display:flex;          /* set the container to flex */
  flex-wrap:wrap;        /* allow children to wrap */
  flex-direction:row;    /* line up children in a row - default value not needed */
}
.container > div {
  min-height:100vh;        /* moved as per comments below */
  border:1px solid black;
  box-sizing:border-box;   /* demo borders only */
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

<div class="container">
  <div class="full-width">
    section one
  </div>
  <div class="half-width">
    div 1
  </div>
  <div class="half-width">
    div 2
  </div>
  <div class="half-width">
    div 3
  </div>
  <div class="half-width">
    div 4
  </div>
</div>