window.resize에서 3 div를 동적으로 크기를 조정하는 방법은 무엇입니까?

Question

나는 다음과 같은 HTML이 :

<div style="min-width:1024px;max-width:82%;margin:0 auto;overflow:auto"> 
    <div style="height:344px;width:100%;float:left;margin-top:72px"></div> 
    <div style="width:100%;float:left;"> 
     <div id="left" class="radius" style="height:700px;width:220px;background:#fff;float:left"></div> 
     <div id="middle" class="radius" style="width:760px;background:#fff;float:left;margin:0px 18px;"> 
      <div style="height:700px;width:100%;float:left"></div> 
     </div> 
     <div id="right" class="radius" style="height:700px;width:280px;background:#fff;float:left"></div> 
    </div> 
</div> 

및 스크립트 창 div의이 smaler 있습니다 biger와 윈도우가 작은 경우로 확장 될 때

function scalling() { 
    var a = $(window).width(); 
    if (a < '1300') { 
     var def = a * 82/100, 
      l = 22000 * def/10, 
      m = 76000 * def/10, 
      p = 28000 * def/10; 
     $('#left').css('width', l); 
     $('#middle').css('width', m); 
     $('#right').css('width', p); 
    } else { 
     $('#left').css('width', '220px'); 
     $('#middle').css('width', '760px'); 
     $('#right').css('width', '280px'); 
    } 
} 

scalling(); 
$(window).resize(function() { 
    scalling(); 
}); 

그것은하지만 데르 방식으로 div의에 크기를 추가 작품을 div의 내 나쁜 anglish에 대한 더 큰

죄송합니다

Answer 1

당신은 단순히이 CSS 문을 사용할 수 있습니다

@media (min-width :1300px){ 
    selector{ 
     width: constant-value; 
    } 
} 

@media (max-width :1300px){ 
    selector{ 
     width: percent-value; 
    } 
}