javascript - 切换内联 Div JQuery 的高度

Question

我在为 div 的高度设置动画时卡住了。有多个带有 css float:left 的 div。当我单击 特定的div 它的高度应该增加。但由于它的高度在增加，所有其他 div 的位置也在改变。我不希望他们改变他们的位置。我想要的是 target div 正下方的 div 应该在不影响其他 div 的情况下向下移动。

Fiddle

这是代码。

$("div").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

div {
  height: 100px;
  width: 100px;
  border: 2px solid;
  float: left;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  HELLO WORLD 1
</div>
<div>
  HELLO WORLD 2
</div>
<div>
  HELLO WORLD 3
</div>
<div>
  HELLO WORLD 4
</div>
<div>
  HELLO WORLD 5
</div>
<div>
  HELLO WORLD 6
</div>
<div>
  HELLO WORLD 7
</div>
<div>
  HELLO WORLD 8
</div>
<div>
  HELLO WORLD 9
</div>
<div>
  HELLO WORLD 10
</div>

Answer 1

您需要清除每个新行上的 float 。我建议将其从 float: left; 更改为 display: inline-block;，并且不要忘记添加 vertical-align: top;.

div {
  width: 100px;
  height: 100px;
  border: 2px solid;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}

jsFiddle