我在彩色背景上有一个响应式正方形网格 <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/
最佳答案
正如 GCyrillus 在他的评论中所问;你真的需要绝对定位吗?
我删除了它,并将 overflow: hidden;
添加到 #squarecontainer
,一切似乎都按预期工作。
http://jsfiddle.net/8o643xqx/9/
编辑:与这个基本相同。怎么样?
关于html - <div> 响应式正方形网格的布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42284246/