当新元素出现时 HTML 元素位置改变

Question

我有一个最初看起来像这样的网页。

单击链接时，页面右侧会出现一个小表格。

问题是发生这种情况时，显示记录已添加 的行也会移动到中间。

这些是我为定位它们而编写的 CSS 规则。

#frmAddService { float:right; padding-right:250px; padding-top:150px; }   //the form

#msg { float:right; padding-right:250px; padding-top:300px; }   //the 'Record Added' line

如何在表单出现时固定该行的位置？

谢谢。

Answer 1

非常感谢您提供的链接，这很有帮助 :)

我创建了一个新的 div 并在其中添加了您的表单和消息。那样的话，如果一举两得。 我把 id，formContainer。

这是CSS

#formContainer{width:350px; float:right;padding-right:250px;}
#frmAddService {position: relative; float:right;padding-top:300px;}

#msg { position:relative; float:right; padding-top:300px; }

#tasks { float:left; padding-left:40px; padding-top:100px; }​

我还修改了您的 Jquery 以更改您的#msg 的值

$(function()
{
    $("#frmAddService").hide();

    $("#add").click(function()
    {
        $("#frmAddService").fadeIn("slow");
        $("#msg").css("padding-top","0px");
        $("#msg").css("margin-top","10px");
        $("#msg").css("padding-right","100px");
        return false;
    });
});

这主要是您在 http://jsfiddle.net/PJVu6/29/ 中看到的它工作正常。

​