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的定位无法按预期方式工作（已通过.section-double > .content-left和.section-double > .content-right中的背景属性进行了检查。

你能帮我吗？

Answer 1

您可以将flexbox用于此布局：

return FutureBuilder<..>(
  ...
  builder: (context, snapshot1) {
    return FutureBuilder<..>(
      ...
      builder: (context, snapshot2) {
        return CustomScrollView(...);
      }
    )
  }
)

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

Answer 2

一件事，您的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>

Answer 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>

缺少div2和div4关闭标记

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

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



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

}

#section1{
  background: green;
}
#section2{
  background: red;
}
#section3{
  background: yellow;
}

而不是制作左右内容。我刚刚添加了

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

    }

这会使div占50％，而float使它们成一行。

检查这个小提琴

https://jsfiddle.net/8jsnpw4o/9/

CSS一页布局

3 个答案: