在divs下得到很多空白？
[英]getting a lot of empty white space underneath divs?
问题描述
（这很新）我的.grid#类下有很多空白...我用海蓝宝石给它上色，以显示第二行框下面正在生成的空间。 如果有人知道如何解决此问题，那么多余的空间就会消失，那将非常有帮助。
我认为可能是网格类弄乱了它，但是我不确定如何简化它。
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>
3 个解决方案
解决方案1
1 已采纳 2018-07-30 18:32:17
模板创建/集成的最佳实践之一是使用引导程序。 Bootstrap是一个不断发展的标准，这是有充分理由的。.因此，您不必编写很难维护的代码，并且最终将完成与Bootstrap相同的事情，并且做得很好。此外，您将更快地找到帮助的方式，因为每个人都将了解您打算做什么以及如何更正代码。.无论如何：您必须删除“ height”以适应所需的尺寸。
.grid2 {
float: center;
margin: 0 auto;
width: 75vw;
max-width: 75vh;
/* height: 75vw; */
max-height: 75vh;
font-size: 2rem;
}
解决方案2
0 2018-07-30 18:28:15
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; 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>
解决方案3
0 2018-07-30 18:51:10
问题出在您的.grid2类中。 您可以删除Height属性或将其设置为适当的值。
.grid2 {
float: center;
margin: 0 auto;
width:75vw;
max-width: 75vh;
max-height: 75vh;
font-size: 2rem;
}
CSS选择器，用于不考虑空格或div的空白列表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.