Question

我的网站上有此CSS部分：

*{
    height: 100%;
    width: 100%;
    margin: 0;

}
.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid div:nth-child(odd){
    border: black 2px solid;
}

.grid div:nth-child(even){
    border: black 2px solid;
}

我想有四个方框，但是它只是为每个HTML标签创建一个新方框，而不是将其放在相应的方框中，如您所见here。

屏幕截图的低多边形部分是可见部分，四个框是应包含内容的框

这是模板：Click

Answer 1

将高度和宽度规范放在网格本身上，并且应表现出更多的预期效果。

* {
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
  width: 100vw;
}

.grid div:nth-child(odd) {
  border: black 2px solid;
}

.grid div:nth-child(even) {
  border: black 2px solid;
}

Answer 2

问题是您要将height: 100%应用于代码中的每个元素。

* {
   height: 100%;
   width: 100%;
   margin: 0;
}

这将强制所有元素占据父元素的100％，并且块元素垂直堆叠。

您不需要这样做。太过分了。

删除上面的代码，然后添加：

body {
  margin: 0;
}

.grid {
  height: 100vh;
}

CSS网格为每个html标签创建一个新框

2 个答案: