html - 制作响应式 css 全屏 100% 宽度，两行三列网格(图像背景和文本叠加)

Question

大家好。

我在这里找到了很多次帮助，非常感谢这个平台!感谢大家!

这是我的第一个问题，我的要求可能有点过分了。

我正在尝试构建一个显示当前时间、日出/日落、天气等的小型“webapp”，以使用 javascript/API 训练自己...

我想构建一个全宽网格 (please see screenshot here) .这样无论桌面大小如何，它始终是全屏的。 (如果可能，在平板电脑上只有两列)，在智能手机上也是 1 列全 Angular 。在网格中的每一个 6div 上，我想获得不同的背景图像和用于数据显示的居中叠加文本。但这个我可以构建。

我尝试使用 bootstrap 但没有得到我想要的东西，所以如果这可以用常规 css 制作就太棒了。没有边距、填充、空间。

有人可以在这里帮助我吗？非常感谢您!

Answer 1

请查看此链接 https://jsfiddle.net/gxjowd7y/3/

body, html{
  height:100%;
}

.box-a{
  background:green;
  height:50%;
}

.box-b{
  background:purple;
   height:50%;
}

.box-c{
  background:orange;
   height:50%;
}

.box-d{
  background:red;
  height:50%;
}

.box-e{
  background:gray;
   height:50%;
}

.box-f{
  background:blue;
   height:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="col-md-4 col-sm-6 col-xs-12 box-a">

</div>

<div class="col-md-4 col-sm-6 col-xs-12 box-b">

</div>

<div class="col-md-4 col-sm-6 col-xs-12 box-c">

</div>

<div class="col-md-4 col-sm-6 col-xs-12 box-d">

</div>
<div class="col-md-4 col-sm-6 col-xs-12 box-e">

</div>
<div class="col-md-4 col-sm-6 col-xs-12 box-f">

</div>