javascript - FullPage.js:div 定位问题

Question

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

更新

实际上最好的结果是:

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