Html 将css应用于div_Html_Css - Fatal编程技术网

Html 将css应用于div

html css

Html 将css应用于div,html,css,Html,Css,我正在尝试开发一组div元素，如下图所示，扩展整个网页。但我不知道如何实现。div元素可能有任何高度和宽度，但外观应如下所示请帮我做这个你可以尝试使用css网格。将页面分为列和行 *{ 保证金：0；填充：0； } .主电网{ 显示：网格；宽度：500px；高度：370px；网格模板列：重复（3，1fr）；网格模板行：重复（2，1fr）；栅隙：10px； } .主网格：第n个子网格（1）{ 背景：橙色；网格列开始：1；网格柱端：2；网格行开始：1；网格行结束：-1； }

我正在尝试开发一组div元素，如下图所示，扩展整个网页。但我不知道如何实现。div元素可能有任何高度和宽度，但外观应如下所示

请帮我做这个

你可以尝试使用css网格。将页面分为列和行

*{
保证金：0；
填充：0；
}
.主电网{
显示：网格；
宽度：500px；
高度：370px；
网格模板列：重复（3，1fr）；
网格模板行：重复（2，1fr）；
栅隙：10px；
}
.主网格：第n个子网格（1）{
背景：橙色；
网格列开始：1；
网格柱端：2；
网格行开始：1；
网格行结束：-1；
}
.主网格：第n个子网格（2）{
背景：蓝色；
网格列开始：2；
网格柱端：-1；
网格行开始：1；
网格行端：2；
}
.主网格：第n个子网格（3）{
背景：绿色；
网格列开始：2；
网格柱端：3；
网格行开始：2；
网格行结束：-1；
}
.主网格：第n个子网格（4）{
背景：黄色；
网格列开始：3；
网格柱端：-1；
网格行开始：2；
网格行结束：-1；
}

这是CSS网格的一项任务，CSS网格是构建响应性布局的一个非常好的工具。您可以在此处阅读更多信息：

HTML:

JSfiddle:

另外，在将来添加您已经尝试过的内容，您需要回退到ie11？CSS网格的用例，请参阅答案。下次请包括您尝试过的代码。懒散的问题通常会产生懒散的答案，而这一次你真的很幸运地得到了答案。

<html>
  <div class="grid">
    <div class="left"></div>
    <div class="right-up"></div>
    <div class= "right-down-a"></div>
    <div class= "right-down-b"> </div>
  </div>
</html>

.grid {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  grid-template-columns: 33vw 33vw 33vw;
  grid-template-rows: 50vh 50vh;
  grid-template-areas:
  "left right-up right-up"
  "left right-down-a right-down-b";
  grid-gap: 5px;

}

.left {
  grid-area: left;
  background-color: blue;
}
.right-up {
  grid-area: right-up;
  background-color: green;
}
.right-down-a{
  grid-area: right-down-a;
  background-color: red;
}
.right-down-b{
  grid-area: right-down-b;
  background-color: purple;
}