代码之家 › 专栏 › 技术社区 › Mogie

在沙发下面有很多空白的地方?

css html

Mogie · 技术社区 · 6 年前

(对这个很陌生)我的身体下面有很多空白。 .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 回复 | 直到 6 年前

Hichem Al Abbessi 6 年前

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

godfather 6 年前

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>

pal 6 年前

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