时间戳

首页 > 解决方案 > 类后面的图像没有正确对齐

html - 类后面的图像没有正确对齐

问题描述

我有六个类名为A 的响应框，当我尝试将图像放在它后面的 div 类图片中时，它不适合精确地放在 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>

标签： htmlcss

解决方案

您需要将 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>

推荐阅读