Question

每个人都好。

我在这里多次寻求帮助，并且非常欣赏这个平台！谢谢大家！

这是我在这里的第一个问题，我可能要求的太多了。

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

我想构建一个全宽网格(please see screenshot here)。因此，无论桌面大小如何，它始终是全屏的。（平板电脑，如果可能只有两列）和智能手机1colum全宽。在网格Id中的每个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>

制作响应式css全屏100％宽度，两行三列网格（图像背景和文字叠加）

1 个答案: