许多时候，我们需要用户可以调整网页中div的大小，当用户增大一个div的宽度时，需要同时减小临近div的宽度，以防止网页宽度发生变化。这里，我们使用了jQuery UI来帮助我们实现。因此我们需要引入jQuery和jQuery UI。
<script src="js/jquery-3.1.1.min.js"></script> <script src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
主体HTML代码：
<div class="content"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </div>
效果图：
当用户拖拽两条黑框中所示的div边缘时，边缘两侧div的大小都会发生变化：
JS代码：
$('#left').resizable({ handles:'e', //'e'是east，允许拖动右侧边框的意思 maxWidth:500, minWidth:230, //resize方法在#left大小改变后被执行 resize:function(event,ui){ //由于我们调整的是#left的大小，当#left改变时，要同时改变#middle的大小 $('#middle').width($('#content').width()-ui.size.width-$('#right').width()); } }); $('#middle').resizable({ handles:'e', maxWidth:($('#content').width()-$('#left').width())*0.7, minWidth:($('#content').width()-$('#left').width())*0.3, resize:function(event,ui){ //由于我们调整的是#middle的大小，当#middle改变时，要同时改变#right的大小 $('#right').width($('#content').width()-ui.size.width-$('#left').width()); } }); //当窗口大小改变时，也要等比例缩放各个div的宽度 $(window).resize(function() { //计算缩放比例，bili=新的容器的宽度 除以 旧的容器的宽度 let bili=$('#content').width()/($('#left').width()+$('#middle').width()+$('#right').width()); $('#left').width($('#left').width()*bili); $('#middle').width($('#middle').width()*bili); $('#right').width($('#right').width()*bili); }); //当三个div的大小被用户调整时，阻止resize事件冒泡到window上，使得window的resize事件被误触发 $('body').bind('resize',function(){return false;})
