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

enter image description here

所以你可以看到，我不能包含div_left和div_right在更大的div，因为我通过form1进行切削加工。据我所知，一张表格不能分开。

EDIT 2

基本HTML：

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

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

来源

2012-07-30 Kevin_TA

是要并排他们需要所有的时间？如果是这样，那么你可以把它们放在同一个“行”或同一个div容器中。你可以发布一些HTML标记，以便我们更了解情况吗？如果你可以简化http://www.jsfiddle.net会更有帮助 – Huangism 2012-07-30 18:57:24

是的，我希望他们保持并排。我添加了一个简单的布局图像。将div_left和div_right放入div容器内会分割form1。 – 2012-07-30 19:10:16

你能试着解释你的代码是如何从这个工作小提琴有什么不同？ 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-30 19:23:19

我一直在玩那个小提琴。这是一个我没有尝试过的简单解决方案。我将尝试并实施它。为了回答你的问题，我有一些与divs交织在一起的形式，但我将它们添加到小提琴中，它仍然有效。 – 2012-07-30 19:32:02

它是无效的HTML把表单标签里面的div – Huangism 2012-07-30 19:54:02

所以这个代码工作正常，只要窗口足够大。我发现，如果我将窗口缩小超过某个阈值（但div_right仍然完全可见），div_right会跳转到div_left下方。有没有办法来解决这个问题？ – 2012-07-30 19:58:52

嗯，我敢肯定的代码比画面更复杂，但你可以尝试把div_right div_left和div_left内将相对定位， div_right将被绝对定位。将CSS“左”为div_right添加到div_left的宽度+ margin-right并将top：0;你应该拥有你的照片。

这是假设div_left固定宽度

更新：是这样的

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

来源

2012-07-30 19:14:26 Huangism

做你提出的建议，是不是会导致form2嵌套在form1中？ – 2012-07-30 19:20:15

@Kevin_TA不，你在表单1结束时添加表单2，并且sicne div_right将被绝对定位，没有任何视觉混淆或者 – Huangism 2012-07-30 19:51:09

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

回答

HTML

CSS

相关问题