javascript - 当内联 block div 高度增长时防止内容流动

Question

我做了一个快速 fiddle来解释这个问题。

$(".box").on({
  mouseenter: function() {
    $(this).addClass('hover');
  },
  mouseleave: function() {
    $(this).removeClass('hover');
  }
});

#wrapper {
  width: 25em;
}
.box {
  width: 5em;
  height: 5em;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  border: 1px solid;
  margin-bottom: 1em;
}
.hover {
  height: 7em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

当盒子的高度增加时，包装内剩余的流动内容向下流动。我想防止内容在高度增加时流动，而是让盒子覆盖其他盒子。

我怎样才能做到这一点？

Answer 1

您可以将负 margin-bottom 添加到您的 hover 类中。

类似于 this .

此外，您可以将每一行包装在具有所需 max-height 的 div 中。

类似于 this .