尝试刷新页面上的一个div内容而不更改div的位置

Question

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

        <title>ajax div example</title>
<script type="text/javascript" src="jscripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    var dbn,machine_name;
function main_draw(d,m,r)
{
    dbn = d;
    machine_name = m;
    draw_charts();
    if ( r > 0 )
        {
            setRefreshid = setInterval("draw_pie()",r);
        }
}
function draw_charts()
{

document.getElementById('ajdiv4').innerHTML = "";
document.getElementById('ajdiv3').innerHTML = "";
document.getElementById('ajdiv2').innerHTML = "";
document.getElementById('ajdiv1').innerHTML = "";
draw_pie();
draw_line();
draw_space();
draw_backup();

}

function draw_pie()
{
setTimeout(function() {
    $.ajax( {

        url: 'JSCharts/graph_pie1.html',
        success: function(html)
        {
            $("#ajdiv4").html(html);
        }
    }); }, 100);
}

function draw_line()
{
setTimeout(function() {
    $.ajax( {

        url: 'JSCharts/graph_line1.html',
        success: function(html)
        {
            $("#ajdiv3").html(html);
        }
    });  }, 200);
}

function draw_space()
{
    setTimeout(function() {
    $.ajax( {

        url: 'JSCharts/space_graph.php',
        success: function(html)
        {
            $("#ajdiv2").html(html);
        }
    });  }, 300);
}

function draw_backup()
{
    setTimeout(function() {
    $.ajax( {

        url: 'JSCharts/backup_graph.php',
        success: function(html)
        {
            $("#ajdiv1").html(html);
        }
    });  }, 400);
}

</script>
</head>
<body>

<div id="ajdiv1" style="float:left"></div>
<div id="ajdiv2" style="float:left"></div>
<div id="ajdiv3" style="float:left"></div>
<div id="ajdiv4" style="float:left"></div>

<button id="b1" onclick="main_draw('CQ1','va2apsap010',10000)">Display Content</button>
</body>
</html>

上面是一个完整的代码，它使AJAX在单击“显示内容”时调用，然后通过调用函数“ draw_pie”刷新div“ ajdiv4”的内容。 唯一的问题是，刷新时会将饼图一直向左移动。 我希望它保持不变并在当前位置进行更新。 如果您知道这里发生了什么，请提供帮助，谢谢。

Answer 1

您是否尝试指定DIV的尺寸？ 使用当前代码，您可能可以执行以下操作：

<style>
#ajdiv1, #ajdiv2, #ajdiv3, #ajdiv4 {
    height:200px;
    width:200px;
} 
</style>

或者，添加类属性以简化操作：

<style>
.chartContainer {
    height:200px;
    width:200px;
} 
</style>

如果您有可用的版本，或者可以在JSfiddle上发布某些内容，则可以更轻松地进行故障排除。