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宽度div.part为 99px，默认为 33px。

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

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

Answer 1

调整 div 面板大小的可能重复项

在这里测试我的解决方案：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 可以改进......但它正在工作！

Answer 2

$('.part').attr('width',10);
$('.blue').attr('width',50);

使用这个，所有名为 part 的 div 的宽度都会减小，只有蓝色的宽度会增加。