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的宽度和deacreasing宽度来轻松调整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可以改进......但它正在发挥作用！

Answer 2

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

使用此命名部分的所有div的宽度将减小，并且仅蓝色的宽度增加。

保持边框并在同一容器中同时调整两个或多个DIV

2 个答案: