锁定元素相对于另一个元素的位置

Question

当我的网页加载时，我会在页面上找到div_left的位置并设置div_right的顶部，以便它们并排显示。这是我发现这样做的唯一方法，因为我的页面很复杂，有多种形式等等。查找/设置位置的代码是：

function findPos() {
    var curLeft = curTop = 0;
    var obj = $("#div_left");
    var position = obj.position();
    curLeft = position.left;
    curTop = position.top;
    moveToPos(curLeft, curTop);
}

function moveToPos(newLeft, newTop) {
    $("#div_right").css({
        position: "absolute",
        top: newTop + "px",
        left: (newLeft + 550) + "px"
    });
}

这些div上方显示的元素会定期更改大小，主要是通过.toggle()。当我上面的元素“扩展”或“收缩”时，我发现div_right不会与其余的页面元素一起移动。有没有办法将div_right“附加”到某个东西或使其成为某个孩子的东西，这样我就不必每次都以编程方式移动它？由于.toggle()动画，这会很痛苦。

编辑1

所以你可以看到，我不能在一个更大的div中包含div_left和div_right因为我要切换form1。据我所知，表格不能分开。

编辑2

基本HTML：

<form id="form1">
<table id="table1"></table>
<div id="div_left"></div>
</form>

<div id="div_right">
<form id="form2"></form>
</div>

Answer 1

您能尝试解释一下您的代码与这个工作小提琴的不同之处吗？ http://jsfiddle.net/FFnyA/2

编辑：发布后代代码

的HTML

<form method='post' id='form1'>
    <div id='table_container'>
        <table><tr><td>1</td><td>2</td></tr></table>
    </div>
    <div id='div_left'>
    </div>
</form>
<div id='div_right'>
    <form method='post' id='form2'>
    </form>
</div>
<div style='clear:both'></div>
<div id='other_content'>
    <p>Look at me</p>
</div>​

的CSS

#table_container
{
    background-color: pink;
}
#div_left
{
    float: left;
    width: 100px;
    height: 100px;
    background-color: lime;
}
#div_right
{
    float: left;
    width: 100px;
    height: 100px;
    background-color: cyan;
}
​

从Huangism的建议http://jsfiddle.net/FFnyA/6/

中提取代码

Answer 2

我确信代码比那张图片更复杂，但你可以尝试将div_right放在div_left里面，div_left会相对定位，div_right绝对定位。将div_right的CSS“left”放到div_left的宽度+ margin-right和top：0;你应该拥有图片中的内容。

这是假设div_left是固定宽度

更新：类似这样的

http://jsfiddle.net/FFnyA/5/