当内联块div高度增长时，防止内容流动

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当盒子的高度增加时，包装盒内剩余的流动内容会向下流动。我希望防止内容在高度增长时流动，而不是盒子外包其他盒子。

我怎么能实现这个目标？

Answer 1

您可以在margin-bottom课程中添加否定hover。

类似于this。

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

中

类似于this。