當我的頁面加載時，我在頁面上找到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

相關問題