FullPage.js：div定位中的问题

Question

我正在使用FullPage.js（官方文档here） 我需要有一张幻灯片（#section，如.js中所述 4个盒子堆叠2乘2，占据所有滑块，滑块周围有一点边缘（就像我制作的方案一样）。我尝试了很多方法，display: block，float，display: flex;但我没有完全成功。最好的是flex-box，在这种情况下，唯一的问题是它不适用于safari和android browser。任何人都可以给我一些帮助吗？谢谢！

更新

实际上最好的结果是：

<div class="section" id="section2">
      <header class="header" >
          <h1>HEADER</h1>     
      </header>
  <div class="content">
            <div class="contentflex"id="up">
                <div class="flex-item" id="box1">  
                </div>                
                <div class="flex-item" id="box2">
                </div>             
            </div>

            <div class="contentflex" id="down">
                    <div class="flex-item" id="box3">
                    </div>    
                    <div class="flex-item" id="box4">
                    </div>
            </div>       
  </div>
</div>

的CSS：

.contentflex{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding-right:1.9em;
  padding-left:2em;
  padding-bottom:0;
  padding-top:0;
  justify-content: center;
  height: 20em
}

#up, #down{
   position:relative;
}

.flex-item{

            width: 50%;
            padding-right:10%; 
            padding-left:10%;
            padding-top:5%;
            padding-bottom:5%;
}

.content{
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
}

Answer 1

使用position:absolute表示框，relative表示部分和幻灯片。

Example online

.section,
.slide{
    position:relative;
}
.box{
    position: absolute;
    width:50%;
    height: 50%;
}
#box1{
    background: blue;
    top: 0;
    left: 0;
}
#box2{
    background: green;
    top:0;
    right:0;
}
#box3{
    background: pink;
    bottom:0;
    left:0;
}
#box4{
    background: orange;
    bottom:0;
    right:0;
}

使用此HTML标记：

<div id="fullpage">
    <div class="section">
        <div class="box" id="box1"></div>
        <div class="box" id="box2"></div>
        <div class="box" id="box3"></div>
        <div class="box" id="box4"></div>
    </div>
</div>