我在为 div
的高度设置动画时卡住了。有多个带有 css float:left
的 div。当我单击
特定的div 它的高度应该增加。但由于它的高度在增加,所有其他 div 的位置也在改变。我不希望他们改变他们的位置。我想要的是 target
div 正下方的 div 应该在不影响其他 div 的情况下向下移动。
这是代码。
$("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>
最佳答案
您需要清除每个新行上的 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;
}
关于javascript - 切换内联 Div JQuery 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42397234/