html - css - div 框在悬停时抖动

Question

我的 css 有问题 - 我希望一个 div 在悬停时有 0.3 秒的平滑过渡，而其他 div 保持原样。 div 对齐，每当我将鼠标悬停在 div 的右侧(2,4,6 - 在 jsfiddle 中)时，下一行 div 就会晃动。我已经尝试并引用了很多网站来修复它。你能帮我解决这个问题吗？

这段代码在 safari 上运行良好。但是，不适用于其他浏览器。

#datelist {
  background-color: white;
  width: calc(80% - 25px);
  display: inline-block;
  margin: 7.5px 0px 7.5px 5px;
  border-radius: 5px;
  padding: 7.5px;
  text-align: center;
}
.displaydate {
  width: calc(50% - 32px);
  height: 35vw;
  background-color: #fafeff;
  color: #05336D;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  display: inline-block;
  z-index: 9;
  float: left;
  margin: 10px;
  padding: 5px;
  border: 1px #bce6fb solid;
  border-radius: 0.75vw;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.displaydate:hover {
  background-color: #00AADC;
  color: white;
  border-color: #00AADC;
  width: calc(50% - 12px);
  height: calc(35vw + 20px);
  margin: 0px;
  overflow: inherit;
  z-index: 10;
  font-size: 1.15vw;
  box-shadow: 0px 7.5px 7.5px #93AAB6;
}

<div id="datelist">
  <div class="displaydate">1</div>
  <div class="displaydate">2</div>
  <div class="displaydate">3</div>
  <div class="displaydate">4</div>
  <div class="displaydate">5</div>
  <div class="displaydate">6</div>
</div>

谢谢， 阿罗基

Answer 1

不要同时使用display: inline-block和float: left。它只会把事情搞砸。

我还强烈建议您使用 * { border-box: box-sizing; } 使用填充时。这会对你有很大帮助。

还有。当您使用 inline-block 时，我建议您使用 vertical-align: top，因此元素始终完美对齐。

所以要解决你的问题；删除 float: left 并添加上述代码。然后它应该可以工作。

我修改了您现有的代码，因此它现在可以按预期工作。

* {
  box-sizing: border-box;
}

#datelist {
  background-color: white;
  width: calc(80% - 25px);
  display: inline-block;
  margin: 7.5px 0px 7.5px 5px;
  border-radius: 5px;
  padding: 7.5px;
  text-align: center;
}
.displaydate {
  display: inline-block;
  width: calc(50% - 32px);
  height: 35vw;
  background-color: #fafeff;
  color: #05336D;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  z-index: 9;
  margin: 10px;
  padding: 5px;
  border: 1px #bce6fb solid;
  border-radius: 0.75vw;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.displaydate:hover {
  background-color: #00AADC;
  color: white;
  border-color: #00AADC;
  width: calc(50% - 12px);
  height: calc(35vw + 20px);
  margin: 0px;
  overflow: inherit;
  z-index: 10;
  font-size: 1.15vw;
  box-shadow: 0px 7.5px 7.5px #93AAB6;
}

<div id="datelist">
  <div class="displaydate">1</div>
  <div class="displaydate">2</div>
  <div class="displaydate">3</div>
  <div class="displaydate">4</div>
  <div class="displaydate">5</div>
  <div class="displaydate">6</div>
</div>