我的 JavaScript 代码遇到问题。我正在实现一个纸牌游戏，点击一个按钮，就会每隔一段时间就会出现 13 张纸牌。
$("button").click(function() {
let i = 0;
setInterval(function() {
if(i == 4) clearInterval();
$(".block").eq(i).css({visibility:"visible"});
$(".block").eq(i).html("TEXT" + i);
i++;
},100);
});.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
visibility: hidden;
}
button {
position: absolute;
top: 170px;
left: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<button id="button">Generate!</button>
</body>
</html>如上所示，我使用 setInterval() 函数以 100 毫秒的间隔显示它们，所有的 div 都按照我告诉它们的方式操作，但它们首先出现在我希望它们出现的位置下方。我怎样才能让它们直接出现在正确的位置？
提前致谢!
最佳答案
将 vertical-align: top; 添加到内联元素
$("button").click(function() {
let i = 0;
setInterval(function() {
if(i == 4) clearInterval();
$(".block").eq(i).css({visibility:"visible"});
$(".block").eq(i).html("TEXT" + i);
i++;
},100);
});.block {
display: inline-block;
width: 100px;
height: 140px;
border: 2px solid;
visibility: hidden;
vertical-align: top;
}
button {
position: absolute;
top: 170px;
left: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<button id="button">Generate!</button>
</body>
</html>关于javascript - 间隔显示后 Div 的位置不正确(包括 fiddle )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61144242/