javascript - 当我们触发父级调整div大小时，如何调整子div的大小

Question

我总共有3个div，一个是父div，该div中有2个子div，现在我想要做什么，如果我调整父div的大小，我也想调整其子div的大小。谁能帮我，我们该怎么做？在这里我添加了我的代码

$(".main_div").resizable();
	    $(".child_div1").resizable();
	    $(".child_div2").resizable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
  <div class="main_div" style="width:500px;height: 500px;border: 2px solid grey;">
	    <div class="child_div1" style="width:300px;height: 100px;border: 2px solid black;"></div>
	    <div class="child_div2" style="width:400px;height: 100px;border: 2px solid red;"></div>
	</div>

Answer 1

您可以使用 alsoResize 选项来指定嵌套元素在调整父元素大小时调整大小:

$(".main_div").resizable({
  alsoResize: '.child_div1, .child_div2'
});
$(".child_div1").resizable({
  containment: "parent"
});
$(".child_div2").resizable({
  containment: "parent"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
<div class="main_div" style="width:500px;height: 500px;border: 2px solid grey;">
  <div class="child_div1" style="width:300px;height: 100px;border: 2px solid black;"></div>
  <div class="child_div2" style="width:400px;height: 100px;border: 2px solid red;"></div>
</div>

有关可调整大小选项的更多信息 here .

希望对你有帮助!