Question

我在彩色背景<div>上有一个响应方块网格。我错误地认为bottombar <div>不在广场网格之下，而是与背景顶部内联？

CSS：

#container {
    width: 100%;
    height: 100%;
    position: relative;
}

#squarecontainer, #infoi {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#squarecontainer {
  z-index: -1;
  background-color:yellow;
}

#infoi {
   z-index: 2;
   background-color:blue;
}

.square {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko         */
  box-sizing: border-box; 
  float:left;
  position:relative;
  width:50%;
  padding-bottom:50%;
  border: 1px solid #FFF;
  background-color:#7F3F98;
  /* RGBa with 0.9 opacity */
  background-color: rgba(127, 63, 152, 0.9);
  /* For IE 5.5 - 7*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E67F3F98, endColorstr=#E67F3F98);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E67F3F98, endColorstr=#E67F3F98)";
  overflow:hidden;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.content {
  position:absolute;
  height:90%;
  width:90%;
  padding: 5%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size:160%;
  font-size:5vw;
  color: #fff;
}

#cell4 {
  visibility:hidden;
}

#bottombar {
  clear:both;
  position:relative;
}

HTML：

<div id="topbar">Topbar information here</div>
<div id="container">
    <div id="squarecontainer">
      <div class="square" id="cell1">
        <div class="content">
        Div 1
        </div>
      </div>
      <div class="square" id="cell2">
        <div class="table">
        <div class="content">
        Div 2
        </div>
        </div>
      </div>
      <div class="square" id="cell3">
        <div class="content">
        Div 3
        </div>
      </div>
      <div class="square" id="cell4">
        <div class="content">
        Div 4
        </div>
      </div>
    </div>
    <div id="infoi">Floating text here</div>
</div>
<div id="bottombar">Bottombar info here</div>

jsfiddle：http://jsfiddle.net/8o643xqx/7/

Answer 1

GCyrillus在评论中提到;你真的需要绝对定位吗？

我删除了它，并将overflow: hidden;添加到#squarecontainer，所有内容似乎都按预期工作。

http://jsfiddle.net/8o643xqx/9/

编辑：基本上与此相同。怎么回事？

<div>布局问题与响应方格网格

1 个答案: