ある要素を別の要素にリサイズする

Question

中断することなく親の内側と外側の要素のサイズを変更したいと思います。 see the exampleをお願いします。

3つの<div>行があり、各行に類似の（または異なる）CSSプロパティを持ついくつかの要素があるとします。例えば：

element-1, element-2, ....... element-6 

@Editサイズ変更可能な内部 ： PICで参照してください。私は `row-1 '内でelement-1のサイズを変更していて、他の兄弟は幅を調整しました。 私はサイズ変更可能な外

自分でそれを行うことができます：写真を参照してください。要素-1は親の次元に影響を与えずに長さを変更します。row-1 &兄弟element-2ですが、他の要素に影響します。 element-3 & 4は、element-1の幅を調整しました。 これは私が&がそれをすることができないことを尋ねたかったものです。

Answer 1

この結果を達成する簡単な方法はありません。

.row { 
    position: relative; 
} 
.element { 
    position: absolute; 
    /*Remove the float attribute, which is obsolete*/ 
} 

JavaScriptコードを変更する必要もあります：あなたは（以下を追加します）CSSを変更する必要が

$(function(){ 
    var zIndex = 100; 
    $('.element').mouseover(function(){ 
     var originalHeight = $(this).height(); 
     $(this).resizable({start: function() { 
        $(this).css('z-index', ++zIndex); 
     }, stop: function(){ 
      /*Horizontal fix*/ 
      var nxt = $(this).nextAll(); 
      var width = $(this).position().left + $(this).width(); 
      var safeWidth = width; 
      var root = $(this).parent(); 
      var thisheight = $(this).height(); 
      var height = root.height(); 
      for(var i=0,l=nxt.length;i<l;i++){ 
       $(nxt[i]).css("left", width+"px"); 
       width += $(nxt[i]).width(); 
       if($(nxt[i]).height() > height) safeWidth = width; 
      } 
      /*Vertical fix*/ 
      if(thisheight > height || originalHeight > thisheight){ 
       var nxt = root.nextAll(); 
       for(var i=0, l=nxt.length; i<l; i++){ 
        var tht = nxt[i]; 
        if(height >= thisheight){ 
         width = 0; 
        } else { 
         width = safeWidth; 
        } 
        height += $(tht).height(); 
        if(!/(^|\s)row(\s|$)/.test(tht.className)){ 
         continue; 
        } 
        var in_nxt = $(tht).children(); 
        for(var j=0,k=in_nxt.length; j<k; j++){ 
         $(in_nxt[j]).css("left", width+"px"); 
         width += $(in_nxt[j]).width(); 
        } 
       } 
      } 
      originalHeight = thisheight; 
     }}); 
     }); 
    $('.element').each(function(){ 
     var ths = $(this).prevAll(); 
     var width = 0; 
     for(var i=0,l=ths.length;i<l;i++)width+=$(ths[i]).width(); 
     $(this).css("left", width+"px")}); 
}); 

プレビュー：http://jsfiddle.net/cQFzf/12/