Question

是否可以用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;
}

Answer 1

全部制作float: left，不要忘记将box-sizing: border-box添加到所有元素（通过.divq）

通过这种方式，您可以在不破坏网格的情况下添加边距和填充。

Answer 2

如果你对flexbox没问题，你可以在包含display: flex和flex-direction: column的包装中跨越四行，每行包含四列。

示例小提琴：

http://fiddle.jshell.net/n50tnnka/2/

Answer 3

您可以使用 Flexbox 轻松完成此操作

<强> DEMO

.content {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.box {
  flex: 25%;
  border: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
}

<div class="content">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

Answer 4

也许您可以尝试使用Bootstrap grid？这很容易使用！

只要给你的div class col-md-3。这样，div就知道他们可以占据屏幕的3 / 12th = 25％=每行4个div。如果你在一个具有固定宽度和高度的父div中包含所有这些div，你应该没问题。

<div id="cube">
    <div class="col-md-3" id="s1"></div>
    <div class="col-md-3" id="s2"></div>
    <div class="col-md-3" id="s3"></div>
    <div class="col-md-3" id="s4"></div>
    <div class="col-md-3" id="s5"></div>
    <div class="col-md-3" id="s6"></div>
    <div class="col-md-3" id="s7"></div>
    <div class="col-md-3" id="s8"></div>
    <div class="col-md-3" id="s9"></div>
    <div class="col-md-3" id="s10"></div>
    <div class="col-md-3" id="s11"></div>
    <div class="col-md-3" id="s12"></div>
    <div class="col-md-3" id="s13"></div>
    <div class="col-md-3" id="s14"></div>
    <div class="col-md-3" id="s15"></div>
    <div class="col-md-3" id="s16"></div>
</div>

通过仍然使用id，您可以给任何方形颜色，但是使用引导程序won't have to use float。

Answer 5

为了获得更好的浏览器支持（比flex），您可以使用display table-cell作为元素但是你必须在父元素中嵌套每个“行”（四个div）：的 HTML：

<div class="row"> <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>

<强> CSS：

html { height: 100%; width: 100%; margin: 0px; } body { height: 100%; width: 100%; margin: 0px; } div { box-sizing:border-box; } .row{ display: table; table-layout: fixed; border-spacing:0px; width:100%; height:25%; } .divq { display:table-cell; height: 25%; width: 25%; }

DEMO：https://jsfiddle.net/Nillervision/06z1L5tg/

16个响应式div，填满整个页面

5 个答案: