Отрегулируйте ширину 2 div с помощью jQuery-Resizable

В настоящее время я работаю на следующей странице:

divResizable был изменен jQuery, используя следующий код в $().ready()

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

Как вы можете видеть, я пытаюсь увеличить ширину divContent, когда divResizable становится меньше и наоборот. Однако, с этим кодом, divContent не всегда "растет" только с левой стороны, он иногда простирается до правой части к нерелевантному div, что не делает изменение размера вообще хорошим.

Есть ли какой-либо вход для более сложного метода, чтобы ширина этих двух div соответствовала?

Что-то, о чем я мог подумать, было бы установить ширину divContent на

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

Как именно я буду делать это с помощью jQuery?

Ответ 1

Демо. Ваш макет может справиться с этим. Если вы обмениваете resizable и content вместе, вам нужно только настроить resizable width:

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 { }

Ответ 2

Попробуйте следующее:

$("#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);
    });

Ответ 3

попробуйте обернуть " divresizable" и " divContent" в div с шириной, установленной в сумму двух содержащихся divs