Question

没关系，我解决了。我只需要用$（window）.resize（function（））;

包裹我的函数

我有一个围绕3 div的容器包装器，它显示内联块。第一个div中的两个具有一定的大小。我希望第三个div在左边宽度。这是我的功能，但它不像我预期的那样工作。

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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%;
}

根据您的脚本，您正在尝试在调整大小时更改框宽度＆＃34; .box3＆＃34;格。

您可能正在寻找$(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

Jquery在调整窗口大小时调整大小（）

2 个答案: