是否可以用 16 个 div 填充整个页面，但仍然具有响应性，以便可以在不同的设备上查看。目前我只使用百分比，但如果有的话，我愿意接受其他解决方案。
-它应该是什么样子。
网页必须包含总共 16 个 div，四个分布在网页的顶部第一季度，四个分布在页面的第二季度，四个分布在页面的第三季度，四个分布在页面的第四季度.
总的来说它应该看起来像一个大立方体或者看起来像 2408 游戏 http://gabrielecirulli.github.io/2048/
-到目前为止我的代码
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
最佳答案
让它们都float: left，并且不要忘记为所有元素添加box-sizing: border-box(通过.divq)
这样您就可以在不破坏网格的情况下添加边距和填充。
关于html - 16 个充满整个页面的响应式 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34300901/