Question

（这是很新的东西），我的.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>

Answer 1

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

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

Answer 2

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>

Answer 3

问题出在您的.grid2类中。您可以删除Height属性或将其设置为适当的值。

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

在divs下得到很多空白？

3 个答案: