Html CSS单页布局

我正在绞尽脑汁准备一页机的基本布局

这是我的密码：

部分{
位置：相对位置；
高度：100vh；
}
.section single>.arrow{
位置：绝对位置；
左：50%；
底部：10%；
}
.section双击>.content左{
宽度：50%；
浮动：左；
背景：灰色；
}
.section双击>.content右键{
宽度：50%；
浮动：左；
背景：黑色；
}
#第一节{
背景：绿色；
}
#第2节{
背景：红色；
}
#第三节{
背景：黄色；
}

---

您可以将flexbox用于此布局：

正文{
保证金：0；
}
.集装箱{
显示：flex；/*将容器设置为flex*/
柔性包裹：包裹；/*允许子对象包裹*/
灵活方向：行；/*在一行中排列子项-不需要默认值*/
}
.container>div{
最小高度：100vh；/*根据以下注释移动*/
边框：1px纯黑；
框大小：边框框；/*仅演示边框*/
}
.全宽{
宽度：100%；
}
.半幅{
宽度：50%；
}

第一节
第一组
第2组
第3组
第4组

有一件事，html中有未关闭的标记

<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 1 section 2
 </div>
 <div class="content-right" id="div2">
  div 2 section 2
 </div>
</section>
<section class="section-double" id="section3">
 <div class="content-left" id="div3">
  div 1 section 3
 </div>
 <div class="content-right" id="div4"> 
  div 2 section 3
 </div>
</section> 

第1分部第2条
第2分部第2条
第1分部第3条
第2分部第3条

我已经更新了您的css，请查看下面的内容

<section class="section-single" id="section1">
  hello
  <a href="#section2"><span class="arrow">Section 1</span></a>
  </section>
<section class="section-double" id="section2">
  <div class="content-left" id="div1">Div 1
</div>
<div class="content-right" id="div2"> Div 2 </div>
</section>
  <section class="section-double" id="section3">
  <div class="content-left" id="div3"> Div 3
</div>
<div class="content-right" id="div4"> Div 4 </div>
</section>

而不是制作左右内容。我刚才又加了一句

.section-double div{
      width: 50%;
      float: left;
     height:100%;
     text-align:center;

    }

这使得div和float都成为一行

检查这把小提琴

---

您尚未关闭

.content right

divs。我同意Pete的回答，因为flexbox支持responsibility，而float不是默认值。你可以使用bootstrap gridsI知道，但我不想使用bootstrap Hanks，它起作用了，但是分区内的div应该与父分区具有相同的高度（因此每个分区都有100%的大小，并将div分成左右两部分）要使其看起来像图中所示，只需将每个div组包装到容器中即可。@ItFreak啊，对了，不确定您是希望每个部分都是100vh还是整个内容都是100vh。我将把最小高度移动到

.container>div

（我使用最小高度，就好像你的一个div超过了高度一样，然后它可以增长-也可以在同一行上增长任何伙伴div是的，这可能仍然使用flex-direction:row；…@ItFreak它是默认的，所以你不必包含它。@VXp最好展示这些东西，让人们知道它在那里。）（即使它是默认值也会被使用），尤其是在使用wrap时

.section-double div{
      width: 50%;
      float: left;
     height:100%;
     text-align:center;

    }