ajaxローダーがロードされると、その下のテキストとボタンが上に移動します

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> 

注：あなたのコンテンツの長さは一貫していない可能性があります。だから、あなたは何が起こることは、あなたの#translationスパンは18pxの高さを持っているということですheight

Answer 2

の最高値を選択する必要があります、しかしajax-loader.gifがジャンプの原因に16pxの高さを有する、スパンおよびpは、インライン要素があり、膨張、収縮が依存しますそれらに

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

または

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

だ情報は、トリックを行う必要があります。