Html 在div下面有很多空白？

（非常新）我的

.grid.

类下面有很多空白。。。我用海蓝宝石给它上色，以显示在第二排盒子下面产生的空间。如果有人知道如何解决这个问题，那么多余的空间就没有了，这将非常有帮助

我想可能是网格类把事情搞砸了，但我不知道如何简化它

div{
背景颜色：海蓝宝石；
}
.grid1{
浮动：中心；
保证金：0自动；
宽度：25vw；
最大宽度：25vh；
高度：25vw；
最大高度：25vh；
字号：2rem；
}
.grid2{
浮动：中心；
保证金：0自动；
宽度：75vw；
最大宽度：75vh；
高度：75vw；
最大高度：75vh；
字号：2rem；
}
.行{
显示器：flex；
}
.盒子{
背景：红色；
保证金：5px；
颜色：白色；
字体大小：粗体；
弹性：10自动；
位置：相对位置；
}
.盒子：之后{
内容：“；
浮动：左；
显示：块；
填充顶部：100%；
}
.box>div{
背景位置：中心；
背景尺寸：封面；
位置：绝对位置；
左：0；
右：0；
底部：0；
排名：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本阴影：0px 0px 8px rgb（36,36,36），0px 0px 20px rgba（0,0,0,0.9）；
}
.1{
背景色：红色；
}
.2{
背景颜色：蓝色；
}

1.
2.
3.
4.

div{
背景颜色：海蓝宝石；
}
.grid1{
浮动：中心；
保证金：0自动；
宽度：25vw；
最大宽度：25vh；
高度：25vw；
最大高度：25vh；
字号：2rem；
}
.grid2{
浮动：中心；
保证金：0自动；
宽度：75vw；
最大宽度：75vh；
最大高度：75vh；
字号：2rem；
}
.行{
显示器：flex；
}
.盒子{
背景：红色；
保证金：5px；
颜色：白色；
字体大小：粗体；
弹性：10自动；
位置：相对位置；
}
.盒子：之后{
内容：“；
浮动：左；
显示：块；
填充顶部：100%；
}
.box>div{
背景位置：中心；
背景尺寸：封面；
位置：绝对位置；
左：0；
右：0；
底部：0；
排名：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本阴影：0px 0px 8px rgb（36,36,36），0px 0px 20px rgba（0,0,0,0.9）；
}
.1{
背景色：红色；
}
.2{
背景颜色：蓝色；
}

1.
2.
3.
4.

创建/集成模板的最佳实践之一是使用引导。 Bootstrap是一个不断发展的标准，这是有充分理由的。这样你就不必编写一个难以维护的代码，并且最终会做与Bootstrap完全一样的事情，并且做得非常好。此外，你会更快地找到帮助方法，因为每个人都会理解你打算做什么以及如何更正代码。。 无论如何： 您必须删除“高度”才能调整到所需的尺寸

.grid2 {
    float: center;
    margin: 0 auto;
    width: 75vw;
    max-width: 75vh;
    /* height: 75vw; */
    max-height: 75vh;
    font-size: 2rem;
}

---

问题出在你的.grid2类中。可以删除“高度”特性，也可以将其设置为适当的值

.grid2 {
        float: center;
        margin: 0 auto;
        width:75vw;
        max-width: 75vh;
        max-height: 75vh;
        font-size: 2rem;
    }

---

高度：75vh；最大高度：75vh；正在调整网格2的大小。这是你写的吗？如果不是的话，你没有阅读它来理解它的风格是什么吗？

center

不是

float

fyino的有效值，我没有写它，这是课堂练习的一部分-高度是它，谢谢。只需移入。grid2移去高度：75vw；