html - 如何修复因鼠标悬停而导致宽度变化的周围 div 的 div 偏移？

Question

感谢社区的一些反馈，我正在重新创建我的网站。在我的一个页面上:我有一个部分，在该部分中我有一个 div，在那个 div 中我还有 6 到 7 个 div。当您将鼠标悬停在它们上方时，这 6 到 7 个会改变宽度。它们向左浮动，列和行因屏幕尺寸而异。我遇到的问题是，当您将鼠标悬停在第一列中的第一个上时，它下面的所有内容都会移动，而不是像第一行中的最后一个那样滑动。 给我带来麻烦的网站/页面:https://www.blizzardcraft.net/tutorials

按照下面的代码会发生以下情况:

当您将鼠标悬停在 box1 -> boxes 4 上并右移后

当你将鼠标悬停在 box2 -> boxes 4 上并右移后

当你将鼠标悬停在 box3 上时 -> 所有都稍微向下移动(期望的结果)

我找不到想要的结果只发生在一个人身上的原因。遗憾的是，我不知道为什么会出现预期的结果，因为与其余代码(据我所知)没有不同的代码

我尝试了不同的填充、 float 排列和溢出溢出。 (我在高中上过网络开发类(class)，但是复杂的html，css目前仍然有点超出我的能力，我不知 Prop 体是什么)

我希望有人在这里提出想法，我之前在这里找到了很多解决方案，所以我决定在这里发布我的问题。 这是我在这里发表的第一篇文章，希望我做对了。

CSS:

body {
  margin: 0 auto;
}
#select {
  color: #ffffff;
  text-align: center;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
  color: #ffffff;
}
#boxes {
  margin: 20px;
}
#boxes .box {
  float: left;
  display: block;
  border-style: solid;
  border-color: #7f7f7f;
  border-width: 5px;
  margin: 5px;
  text-align: center;
  width: 27%;
  padding: 10px;

  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
}
#boxes .box:hover {
  width: 30%;
}
#boxes .box img {
  /*display: inline-block;*/
  width: 100%;
}
#boxes .box h3 {
  margin-top: 0;
}
#boxes .box a, a:active, a:visited, a:hover, a:link {
  color: inherit;
}

HTML:

<section id="boxes">
      <div class="container">
        <a>
          <div class="box">
            <img src="Box1.png" alt="Box1">
            <h3>Lobby</h3>
          </div>
        </a>
        <a>
          <div class="box">
            <img src="Box2.png" alt="Box2">
            <h3>Missile Wars</h3>
          </div>
        </a>
        <a>
          <div class="box">
            <img src="Box3.png" alt="Box3">
            <h3>Creative</h3>
          </div>
        </a>
        <a>
          <div class="box">
            <img src="" alt="Box4">
            <h3>Sky Block</h3>
          </div>
        </a>
        <a>
          <div class="box">
            <img src="" alt="Box5">
            <h3>BedrockSMP</h3>
          </div>
        </a>
        <a>
          <div class="box">
            <img src="" alt="Box6">
            <h3>TNT Wars</h3>
          </div>
        </a>
      </div>
    </section>

Answer 1

您可以尝试使用 Flexbox .以下是对子元素的 flex-basis 属性使用过渡的代码:https://codepen.io/kostasx/pen/BaBvaxr?editors=1100

<section id="boxes">
  <div class="container">
    <a>
      <div class="box">
        <img src="https://www.blizzardcraft.net/tutorials/media/images/Lobby.png" alt="Box1">
        <h3>Lobby</h3>
      </div>
    </a>
    <a>
      <div class="box">
        <img src="https://www.blizzardcraft.net/tutorials/media/images/Lobby.png" alt="Box2">
        <h3>Missile Wars</h3>
      </div>
    </a>
    <a>
      <div class="box">
        <img src="https://www.blizzardcraft.net/tutorials/media/images/Lobby.png" alt="Box3">
        <h3>Creative</h3>
      </div>
    </a>
    <a>
      <div class="box">
        <img src="https://www.blizzardcraft.net/tutorials/media/images/Lobby.png" alt="Box4">
        <h3>Sky Block</h3>
      </div>
    </a>
    <a>
      <div class="box">
        <img src="https://www.blizzardcraft.net/tutorials/media/images/Lobby.png" alt="Box5">
        <h3>BedrockSMP</h3>
      </div>
    </a>
    <a>
      <div class="box">
        <img src="https://www.blizzardcraft.net/tutorials/media/images/Lobby.png" alt="Box6">
        <h3>TNT Wars</h3>
      </div>
    </a>
  </div>
</section>

CSS:

body {
  margin: 0 auto;
  background: black;
}
#select {
  color: #ffffff;
  text-align: center;
}
.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
  color: #ffffff;
  /* FLEXBOX */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#boxes a {
  flex-basis: 30%;
  transition: flex-basis 400ms ease;
  box-sizing: border-box;
}
#boxes a:hover {
  flex-basis: 33%;
}
#boxes {
  margin: 20px;
}
#boxes .box {
  box-sizing: border-box;
  display: block;
  border-style: solid;
  border-color: #7f7f7f;
  border-width: 5px;
  margin: 5px;
  text-align: center;
  padding: 10px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
}
#boxes .box img {
  /*display: inline-block;*/
  width: 100%;
}
#boxes .box h3 {
  margin-top: 0;
}
#boxes .box a, a:active, a:visited, a:hover, a:link {
  color: inherit;
}