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