Javascript 在单击内联div时设置高度动画

这似乎是一个非常基本的问题，但我在设置

div

的高度动画时遇到了问题。css

float:left

有多个div。当我

单击
时，特定div的高度应该增加。但是由于它的高度在增加，其他所有div的位置也在改变。我不希望它们改变他们的位置。我想要的是
目标下方的div应该向下移动，而不会影响其他div


这是代码


$（“div”）。单击（函数（）{
如果（$（this）.height（）！=100）
$（此）。设置动画({
身高：100
}, 1000);
其他的
$（此）。设置动画({
身高：150
}, 1000);
});
div{
高度：100px；
宽度：100px；
边框：2倍实心；
浮动：左；
利润率：10px；
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
你好，世界6
你好，世界7
你好，世界8
你好，世界9
你好，世界10
嗯，我想您可以通过在内部添加另一个div来实现，并扩展该div的大小：


$（“.inner div”）。单击（函数（）{
如果（$（this）.height（）！=100）
$（此）。设置动画({
身高：100
}, 1000);
其他的
$（此）。设置动画({
身高：150
}, 1000);
});
div{
高度：100px；
宽度：100px；
}
外分区{
浮动：左；
利润率：10px；
溢出：可见；
}
.内分区{
边框：2倍实心；
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
你好，世界6
你好，世界7
你好，世界8
你好，世界9
你好，世界10
我认为这正是你所期望的几乎不可能实现的，但如果是的话，可能很难实现。但是如果您将
flexbox
与一些
jQuery
和
css
转换一起使用，您将在每个屏幕大小上获得完全响应的方案



$（“.container”）。查找（'div'）。单击（函数（）{
$（this.toggleClass（'show'）；
});
.container div{
高度：100px；
宽度：100px；
边框：2倍实心；
利润率：10px；
过渡高度：.5s；
}
.集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
调整内容：灵活启动；
调整内容：灵活启动；
调整项目：灵活启动；
}
.表演{
高度：150px！重要；
过渡高度：.5s；
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
你好，世界6
你好，世界7
你好，世界8
你好，世界9
你好，世界10
我看到了，正如您从使用浮点数中看到的，在html中，按列分组内容更好，以一个div为一列。谢谢您的回答，但问题是，当高度增加时，div重叠。我希望目标div下面的div向下移动，不要重叠。我明白了，所以我建议您使用类似pinterest的布局。我正在尝试避免任何插件。我只是在为这个问题寻找一个更好的css。这几乎是相似的，但问题是所有下面的div都在移动，不仅仅是目标div下面的div。@shubhamagrawal我认识我的朋友，但正如我上面所说的，这将很难实现，因为脚本必须以某种方式检查哪些div正位于他下面，它打赌这将是一种静态的方法，不可能和完全负责的网页设计一起工作。尝试将窗口缩小到最大值，它仍然可以正常工作。感谢您的回复，现在我甚至明白这不是那么容易实现的，但问题是这是项目要求，我必须按照给我的指示来做。我也在寻找任何替代方法来做这件事。@shubhamagrawal我希望我能提供帮助你我会努力改进它，如果我能取得更好的成绩，我会让你知道（：好的，谢谢你的帮助，即使我正在努力。希望我能得到解决方案。