자동 크기 조정 방법

Question

컨테이너에 3 개의 열이 있다고 가정 해 봅시다. 요소의 너비를 최소화하면 인접 요소가 너비를 최대화하여 영역을 덮어야합니다. my live example on jsfiddle 내가 원하는 무엇 : 모든 요소의 크기 조정 (최소화하거나 최대화) 다음 인접한 요소가 자동
2.container 크기를 고정이하여 치수를
3 요소를 변경해야하지 않아야 폭을 조정해야
1. 경우 컨테이너 내부에 자동으로 맞춰 짐
핸들러를 사용할 수있는 방법이 있습니다. 그것은 #의에서 element1, 2 패딩, 여백 및 테두리를 제거, 레이아웃 ui-resizable-handle

<div id = "container"> 
     <div id = "element1"> </div> 
     <div id = "element2"> </div> 
     <div id = "element3"> </div> 
    </div> 


    #element1 {width:30%; height:100;} 
    #element2 {width:40%; height:100;} 
    #element3 {width:30%; height:100;} 

Answer 1

내가 제안의 jQuery에는

3. 어쩌면이 도움이됩니다 사용합니다.

$(function() { 

    var startwidth = 0; 
    var containerwidth = $('#container').width(); 

    $('.resize').resizable({ 
     containment:'#container', 
     start: function(){ 
      startwidth = $(this).width()/containerwidth; 
     }, 
     stop: function(event, ui){ 
      var nsiblings = $(this).siblings().size(); 
      var delta = ($(this).width()/containerwidth - startwidth); 
      $(this).siblings().each(function(){ 
       var siblingswidth = ($(this).width()/containerwidth - delta/nsiblings) * containerwidth; 
       $(this).width(siblingswidth); 
      }); 
      var totalwidth = 0; 
      $('#container').children().each(function(){ 
       totalwidth = totalwidth + $(this).width(); 
      }); 
      if(totalwidth > containerwidth){ 
       $(this).width($(this).width() - (totalwidth - containerwidth)); 
      } 
     } 
    }); 
});