Question

在我的页面中，我使用了ajax loader gif。单击按钮时，会显示ajax加载程序，但是下面的文本会向上移动，我希望它们保持不变，我的意思是不要移动。有没有办法做到这一点？谢谢你的帮助。

从这里也可以看出：

http://www.dilyurdu.com

function AjaxLoader()
{
    document.getElementById("translation").innerHTML="<img src='ajax-loader.gif' />"

    $.ajax({
        type: "POST",
        url: "test1.php",           
        success: function(response) {

          $("#translation").html("hello");

        }

    });


}

<div class="informationArea">
     <h2><span id="infoaream">caballo</span></h2>
     <div id="wordDetailArea">
        <h2>Translation:</h2><p><span id="translation">dog</span></p>
        <h2>Context:</h2><p><span id="context">I have got a dog.</span></p>
     </div>       
</div>

Answer 1

这是因为<p>标记的高度根据其内容而变化。

修复方法是使用固定的height。

<p style="height: 25px;"><span id="translation">dog</span></p>

注意：从ajax请求开始，您的内容长度可能不一致。因此，您应为height

选择最高值

Answer 2

您的#translation范围的高度为18px，但ajax-loader.gif的高度为16px，导致跳转，跨度和p为内联元素，并根据信息进行扩展和收缩就在他们身上

<div id="translation" style="height: 18px;">hello</div>

或

<span id="translation" style="display:block;height: 18px;">hello</span>

应该这样做。

当加载ajax加载器时，它下面的文本和按钮向上移动

2 个答案: