Question

我遇到了css的问题 - 我希望在悬停和其他div上有一个div的0.3s平滑过渡保持不变。 div是排成一线的，每当我在div的右侧（2,4,6 - 在jsfiddle中）盘旋时，下一行div都在颤抖。我尝试过并引用了很多网站来修复它。你能帮帮我吗？

此代码在safari上正常运行。但是，不是在其他浏览器上。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

谢谢， Arocki

Answer 1

请勿同时使用display: inline-block和float: left。它只会搞砸。

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

另外。当你使用内联块时，我建议你使用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>

css - div盒子在悬停时摇动

1 个答案: