Javascript 切换内联Div JQuery的高度

我在设置

div

的高度动画时被卡住了。css中有多个div

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
您需要清除每一新行上的浮动。我建议将其从
float:left至
显示：内联块
，不要忘记添加
垂直对齐：顶部

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

切换元素高度而不影响周围div位置的一种方法是在现有div中绝对定位项目，然后切换该高度


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

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
你好，世界6
你好，世界7
你好，世界8
你好，世界9
你好，世界10

$（“文章”）。单击（函数（）{
如果（$（this）.height（）！=300）
制作动画（{height:300}，1000）；
其他的
制作动画（{height:200}，1000）；
});
.column{
浮动：左；
宽度：45%；/*或固定数量*/
保证金权利：5%；/*或固定金额*/
}
文章{
边框：1px实心；
边缘底部：24px；
背景色：#f6f6f8；
}

大黄蜂
奥古斯特·穆莱斯蒂·奥古斯特·穆莱特·利奥·康塞奎特·波苏尔坐在那里。肘关节或肘关节前前庭

努拉埃尼姆大学
这是一位拍卖人，他是一位伟大的商人。在努拉埃尼姆。大黄蜂

秃鹫库拉索
在调味品设施是门。Sed nec diam eu diam mattis viverra。弗林斯利亚号、塞姆珀号、莫里斯号、萨皮安·胡斯托号。莫利斯毛里斯埃尼姆前庭

封建主义宣言
秃鹫蜥蜴，短舌苔，短舌苔，长舌苔，长舌苔。每一个科努比亚都有足够的社会责任

多奈克康格
Vivamus hendrerit arcu使用了一种交通工具。这是一位拍卖人，他是一位伟大的商人。在努拉埃尼姆。不属于威尼斯人的大分子。这是一个悬而未决的宿命。毛里斯·亚库利斯·波特提托·波苏尔。普拉森特

侵权人
在圣殿和圣殿的圣殿。Donec congue lacinia dui，一种香肠调味品laoreet。Nunc eu ullamcorper orci。梅特斯的前庭前庭。在佩伦特式的福西布斯前庭。在NullaJusto，eget luctus tortor。努拉

犹他州梅特斯马萨市
在努拉埃尼姆。不属于威尼斯人的大分子。这是一个悬而未决的宿命。毛里斯·亚库利斯·波特提托·波苏尔。我是马萨

您还应更改您的状况：

if ($(this).height() != 100)

变成这样：

if ($(this).hasClass( "div-100" ))

只是因为在某些情况下，
$（this）.height（）100
。例如，对于Chrome 56.0.2924.87（x64）和Windows 125%显示器的DPI缩放级别：


缩放级别90%-
$（此）.height（）=99.999999 725097656
缩放级别100%-
$（this）.height（）=100.00000457763672
缩放级别110%-
$（此）.height（）=99.99999576416016
这里有一个使用列的解决方案。您可以调整窗口大小并重新填充列：


var$box；
$（文档）.ready（函数（）{
$box=$（“.box”）；
setupColumns（）；
$（窗口）。打开（“调整大小”，设置列）；
});
函数setupColumns（）{
var$columnwrapper=$（“#列”）；
var w=$（“”）.addClass（“列”）.width（）；
var cnt=Math.floor（$columnwrapper.width（）/w）；
var cols=[]；
对于（变量i=0；i
.column{
宽度：114px；
浮动：左
}
.盒子{
高度：100px；
宽度：100px；
边框：2倍实心；
边际下限：10px
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
你好，世界6
你好，世界7
你好，世界8
你好，世界9
你好，世界10
这与我正在寻找的类似，但我希望目标div列中的div应该向下移动，而不是另一个div如果是这样，您必须