調整使用的2周的div寬度jQuery的可調整

schema of the page

divResizable已由jQuery的使用下面的代碼修改$().ready()

$("#divResizable").resizable({ handles: 'e' }); 
$("#divResizable").bind("resize", function (event, ui) { 
     $('#divContent').width(850 -(ui.size.width - 175)); 
});

作爲你可以看到，當divResizable變小時，我嘗試增加divContent的寬度，反之亦然。但是，通過這段代碼，divContent並不總是隻向左側「增長」，它有時會延伸到不相關div的右側，這不會使調整大小看起來不錯。

是否有任何更復雜的方法讓這些2 div的寬度相對應的輸入？

東西我能想到的將是divContent的寬度設定爲

(start of irrelevant - divResizable.width) == 850px 
^e.g 1025px  ^e.g. 175px

我究竟將如何做到這一點使用jQuery？

來源

2011-05-19 Dennis Röttger

爲什麼你不在divContent中嵌套divResizable和不相關的div並將它們浮動？只是要求確保你沒有忽視一個明顯的解決方案。 – 2011-05-19 08:19:17

是的，因爲這不是完整的網站（其他元素是不相關的這個問題，雖然），讓他們在這個div內不幸的是根本不工作。 – 2011-05-19 09:58:44

Demo - 您的佈局可以處理這個問題。如果你換resizable和content在一起，你只需要調整resizable的寬度：

HTML

<div id="page"> 
    <div id="wrapper"> 
    <div id="resizable">resizable</div> 
    <div id="content">content</div> 
    </div> 
    <div id="irrelevant">irrlevant</div> 
</div>

CSS

#resizable { float:left; width:175px; } 
#content { overflow:hidden; width:auto; } 
#wrapper { float:left; width:1025px; } 
#irrelevant { }

來源

2011-05-27 11:25:21 galambalazs

感謝您的回答，甚至通過添加演示的工作。但我擔心這也是我早期的效果，如果我只是使用文本框來調整寬度，那麼計算在瀏覽器上相當容易，但我想用鼠標動態拖動它（http://jqueryui.com /演示/可調整大小/）。這是我在原始問題中提到的問題所在。 – 2011-05-30 07:01:35

我喜歡當人們爲自己創造問題。 :)上面發佈的例子使用** CSS來進行計算，所以你不必這樣做。**爲了在鼠標拖動時調整大小，你需要**一行**的javascript：'$（「#resizable」）.resizable（）;'。當人們懶得解決問題時，我也很喜歡。 ** http：//jsbin.com/ikemu4/3/** ...看到「新」演示... – galambalazs 2011-05-30 09:55:35

冷靜下來，毛茛！只要確保我爲我的賞金獲得儘可能多的服務。不幸的是，'＃content'總是會在'＃resizable'後面繼續，這不僅僅是「不酷」，因爲它需要對所有背景圖片進行修改。有沒有什麼辦法可以完成你所做的事情，而不用讓＃＃內容繼續在＃可調整大小後面？請檢查http://jsbin.com/ikemu4/7/，紅色邊框。它不應該走這麼遠的左邊。 – 2011-05-30 11:06:39

嘗試包裝 'divresizable' 和 'divContent' 在一個div 寬度設置爲兩者的總和包含的div

來源

2011-05-19 13:43:50 inadcod

只要我嘗試調整大小，divContent會「跳轉」到另一行。 – 2011-05-19 13:58:45

也許我錯了，但不是更容易有一個**包裝div **設置爲特定的寬度，有** divResizable **設置爲特定的寬度，離開** divContent **沒有與設置，或將其設置爲** auto **，並將調整大小腳本應用於** divResizable **？ – inadcod 2011-05-20 14:26:02

試試這個：

$("#divResizanle").resizable({ handles: 'e' }); 
    $("#divResizable").bind("resize", function (event, ui) { 
     $('#divContent').width(850 -(ui.size.width - 175)); 
     $('#divContent').css("left",ui.size.width - ui.originalSize.width); 
    });

來源

2013-07-01 17:58:28 xyd

調整使用的2周的div寬度jQuery的可調整

回答

相關問題