(对此很陌生)我的 .grid# 类下面有很多空白...我用海蓝 gem 给它上色以显示在第二行下方生成的空间箱子。如果有人知道如何解决这个问题，那么多余的空间就会消失，那将非常有帮助。
我认为可能是网格类把它搞砸了，但我不确定如何简化它。
div{
background-color:aquamarine;
}
.grid1 {
float: center;
margin: 0 auto;
width:25vw;
max-width: 25vh;
height: 25vw;
max-height: 25vh;
font-size: 2rem;
}
.grid2 {
float: center;
margin: 0 auto;
width:75vw;
max-width: 75vh;
height: 75vw;
max-height: 75vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-position: center;
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-color: red;
}
.inner2 {
background-color: blue;
}<body>
<div class="grid1">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
</div>
</div>
<div class="grid2">
<div class="row">
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner2">3</div>
</div>
<div class="box">
<div class="inner2">4</div>
</div>
</div>
</div>
</body>最佳答案
模板创建/集成的最佳实践之一是使用 Bootstrap 。 Bootstrap 是一个不断发展的标准，这是有原因的……这样你就不必编写难以维护的代码，并且最终会做与 bootstrap 一样的事情，而且做得很好。此外，您会更快地找到帮助，因为每个人都会理解您打算做什么以及如何更正代码。 反正: 您必须删除“高度”才能 flex 到所需的尺寸..
.grid2 {
float: center;
margin: 0 auto;
width: 75vw;
max-width: 75vh;
/* height: 75vw; */
max-height: 75vh;
font-size: 2rem;
}
关于html - 在 div 下有很多空白区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51599978/