Question

我正在尝试在我的响应方格中嵌入最终的div，但是最后的方块只是拒绝留在它们的行内。一切正常，直到我开始添加.inside_square。

HTML：

<div class="container">
  <div class="row">
    <div class="main_square">
      <div class="inside_row">
        <div class="inside_square"></div>
        <div class="inside_square"></div>
        <div class="inside_square"></div>
      </div>
      <div class="inside_row"></div>
      <div class="inside_row"></div>
    </div>
    <div class="main_square"></div>
    <div class="main_square"></div>
  </div>
  <div class="row">
    <div class="main_square"></div>
    <div class="main_square"></div>
    <div class="main_square"></div>
  </div>
</div>

CSS：

.container {
    border: 1px solid red;
    width: 45.5vw;
    height: 30vw;
    margin: auto;
}

.row {
    border: 1px solid blue;
    width: 100%;
    height: 50%;
}

.main_square {
    border: 1px solid green;
    width: 15vw;
    height: 15vw;
    display: inline-block;
    margin-right: -4px;
}

.inside_row {
    border: 1px solid black;
    width: 100%;
    height: 33%;
}

.inside_square {
    border: 1px solid pink;
    width: 33%;
    height: 100%;
    display: inline-block;
    margin-right: -4px;
}

添加最终方块会破坏从image I到image II

的布局

如何解决此问题？奖金问题是我如何修复边界稍微超出其边界，即使我用％设置其大小？

第三个嵌套的div拒绝留在容器中

0 个答案: