Jquery resize() 윈도우 크기 조정시

Question

신경 쓰지 마라, 해결했다. 난 그냥 내 함수를 $ (window) .resize (function());

인라인 블록으로 표시되는 3 개의 div 주위에 컨테이너 래퍼가 있습니다. 첫 번째 div 중 두 개는 특정 크기를가집니다. 그리고 세 번째 div가 왼쪽 너비를 차지하게합니다. 이것은 내 기능이지만 예상대로 작동하지 않습니다.

var totalW = $(".container").width(); 
 
var w1 = $(".box1").width(); 
 
var w2 = $(".box2").width(); 
 
var w3 = totalW - w1 - w2 - 10; 
 

 
//$(".box3").css("width", w3); // This code doesnt work on resize. 
 

 
$(".box3").resize(function() { 
 
    $(".box3").css("width", w3); 
 
});

div.container { 
 
    width=100%; 
 
} 
 
div.container > div { 
 
    display: inline-block; 
 
} 
 
div.box1 { 
 
    width: 20px; 
 
    background: red; 
 
} 
 
div.box2 { 
 
    width: 20px; 
 
    background: green; 
 
} 
 
div.box3 { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box1">1</div> 
 
    <div class="box2">2</div> 
 
    <div class="box3">3</div> 
 

 
</div>

Answer 1

처음이

div.container { 
 
    width: 100%; 
 
} 
 
div.left { 
 
    float: left; 
 
} 
 
div.box1 { 
 
    width: 20px; 
 
    background: red; 
 
} 
 
div.box2 { 
 
    width: 20px; 
 
    background: green; 
 
} 
 
div.box3 { 
 
    background: yellow; 
 
    margin-left: 40px; /* to shift background color */ 
 
}

<div class="container"> 
 
    <div class="box1 left">1</div> 
 
    <div class="box2 left">2</div> 
 
    <div class="box3">3</div> 
 
</div>

Answer 2

에 대한 JS 필요하지 않습니다, 당신의 div.container CSS 정의에 오타 오류가 있습니다. :에 = 변경, 그것은 다음과 같이해야한다 : 당신이 ".box3"DIV의 크기를 조정하는 때 상자 너비를 변경하려는 스크립트에

div.container { 
    width: 100%; 
} 

를 기준으로합니다.

당신은 $(window).resize을 찾고 될 수

하지 $(".box3").resize :

$(window).resize(function() { 
    $(".box3").css({"width": w3}); 
}); 

당신은 또한 크기 조정에 변수의 값을 업데이트 할 수 있습니다 :

$(window).resize(function() { 
    totalW = $(".container").width(); 
    w1 = $(".box1").width(); 
    w2 = $(".box2").width(); 
    w3 = totalW - w1 - w2 - 10; 
    $(".box3").css({"width": w3}); 
}); 

HERE'S A DEMO, TRY TO RESIZE THE DISPLAY BOX