javascript - 在同一个容器中同时保留边框和调整两个或多个 DIV 的大小

Question

代码:

<div id="widget1">
  <div class="part blue">this is the part</div>
  <div class="part white">of the genial</div>
  <div class="part red">and good widget</div>
</div>

假设 div#widget1 的宽度为 99px，div.part 默认为 33px。

如何通过按比例增加其宽度和减少其他 div.part 的宽度来轻松调整 div.blue 的大小？

http://jqueryui.com/demos/resizable/#synchronous-resize : 举一个元素同时增加的例子。

Answer 1

resizing div panel 可能重复

在这里测试我的解决方案:http://jsfiddle.net/lnplnp/MxKLH/

但这完全符合我的需要:

JavaScript :

$(document).ready(function() {

  // init
  var containerWidth = $("#container").width();
  var nbpanels = $(".panel").size();
  var padding = 2.5;

  $(".panel").width( (containerWidth / nbpanels) - (nbpanels * padding - 2 * padding));

  $(".panel").resizable({
    handles: 'e',
    maxWidth: 450,
    minWidth: 120,
    resize: function(event, ui){
      var currentWidth = ui.size.width;
      // set the content panel width
      $(".panel").width( ( (containerWidth - currentWidth + padding ) / (nbpanels - 1) ) - ((nbpanels - 1) * padding) );
      $(this).width(currentWidth);
    }
  });

});

HTML:

<div id="container">
  <div id="panel1" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel2" class="panel" >
    some more text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel3" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel4" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div class="clear"></div>
</div>

CSS:

.clear{
  clear:both;
}

#container{
  border: 1px red solid;
  margin: 0 auto;
  width: 900px;
}

.panel{
  background-color: #9999FF;
  float: left;
  height: 200px;
  padding: 2.5px;
}

#panel1{
  background-color: #FF0000;
}

我认为 JS 可以改进......但它正在工作!