1

当我的页面加载时，我找到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_leftand 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>
4

2 回答 2

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/

于 2012-07-30T19:23:19.813 回答
0

好吧，我确信代码比那张图片更复杂，但是您可以尝试将 div_right 放在 div_left 内，并且 div_left 将相对定位， div_right 将绝对定位。将 div_right 的 CSS "left" 放在 div_left 和 top:0 的 width + margin-right ；你应该有你在图片中的东西。

这是假设 div_left 是固定宽度

更新：像这样

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

于 2012-07-30T19:14:26.710 回答