jquery resize（）調整窗口大小

Question

沒關係，我解決了它。我只需要用$（window）.resize（function（））來包裝我的函數;

我有一個容器包裝3周圍顯示內嵌塊。第一個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

你不需要JS這個

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

首先，對您div.container CSS定義一個錯字錯誤。更改=到:，它應該是這樣的：基於

div.container { 
    width: 100%; 
} 

在你的腳本你想，當你調整「.box3」 div來改變框的寬度。

你可能會尋找$(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