时间戳

首页 > 解决方案 > 如何修复从鼠标悬停宽度变化的周围 div 的 div 移位？

html - 如何修复从鼠标悬停宽度变化的周围 div 的 div 移位？

问题描述

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

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

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

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

当您将鼠标悬停在 box3 上时 -> 都只是稍微向下移动（期望的结果）

我无法找到所需结果仅发生在一个上的原因。遗憾的是，我不知道为什么会出现预期的结果，因为与其他代码没有不同（我知道）

我尝试了不同的填充、浮动排列和处理溢出。（我在高中上过关于 Web 开发的课程，但是复杂的 html、css 目前仍然有点超出我的能力，我不知道具体是做什么的）

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

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>

标签： htmlcss

解决方案

您可以尝试使用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;
}

推荐阅读