班级后面的图片未正确对齐

Question

我有六个响应式框，它们的类名称为 A ，当我尝试将图像放在div类 pic 的内部时，它并不完全适合6个响应框盒子。图像稍微向左侧投影。

如何使其准确地位于盒子后面？

我已经尝试过，但无法删除突出到左侧的部分。

.A {
  width: 60%;
  height: 110px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
}

#container {
  white-space: nowrap;
  text-align: center;
  margin-right: 30%;
  border: px solid #CC0000;
}

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}

.pic {
  background-size: 100vw 100vh;
}

.container2 {
  margin-top: 6%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #009;
  margin-left: 20%;
  border: px solid #FF3399;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" style="background-image: url(https://picsum.photos/200/300/?random);">
      <div id="container">

        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
      </div>
      <div id="container">

        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
      </div>

    </div>


  </div>

</div>

Answer 1

您需要将A元素的宽度更改为容器的三分之一，并删除容器的右边距以使背景和行合适。

.A {
  width: calc(33.3% - 4px);
  height: 110px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
}

#container {
  white-space: nowrap;
  text-align: center;
  border: px solid #CC0000;
}

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}

.pic {
  background-size: 100vw 100vh;
}

.container2 {
  margin-top: 6%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #009;
  margin-left: 20%;
  border: px solid #FF3399;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" style="background-image: url(https://picsum.photos/200/300/?random);">
      <div id="container">

        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
      </div>
      <div id="container">

        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
        <div class="A" >
         
        </div>
      </div>

    </div>


  </div>

</div>