效果演示：

HTML：

鼠标移动到矩形分割线
    
    
     
    
     
    
    

JS：

$(function () {    $(".resizable1").resizable(    {        autoHide: true,        handles: 'e',        resize: function(e, ui)         {            var parent = ui.element.parent();            var remainingSpace = parent.width() - ui.element.outerWidth(),                divTwo = ui.element.next(),                divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";                divTwo.width(divTwoWidth);        },        stop: function(e, ui)         {            var parent = ui.element.parent();            ui.element.css(            {                width: ui.element.width()/parent.width()*100+"%",            });        }    });});

CSS：

@import url('http://cdn.gbtags.com/jqueryui/1.10.4/css/jquery-ui.min.css');*{  font-family: 'microsoft yahei',Arial,sans-serif;}.wrap {    width: 100%;    border: 1px solid #999;    font-size: 0;}h4{  font-weight: normal;}.resizable {    width: 50%;    height: 120px;    padding: 0.5em;    background-color: orange;    display: inline-block;}.resizable2 {    background-color: #08a3ca;}.ui-resizable-e {     cursor: e-resize;     width: 16px;     right: -5px;     top: 0;     bottom: 0;     background-color: #666;}