【问题标题】:make a responsive css fullscreen 100% width, two rows three column grid (images background and text overlay)制作响应式 CSS 全屏 100% 宽度,两行三列网格(图像背景和文本叠加)
【发布时间】:2016-12-12 14:58:35
【问题描述】:

大家好。

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

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

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

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

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

任何人都可以在这里帮助我吗?提前非常感谢您!

【问题讨论】:

    标签: html css grid responsive


    【解决方案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>

    【讨论】:

    • 哇!这太棒了,而且看起来很简单。我现在感觉有点傻。非常非常感谢你,伙计!太棒了!
    猜你喜欢
    • 1970-01-01
    • 2012-08-18
    • 1970-01-01
    • 2021-04-04
    • 2013-06-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多