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

只需将max-width和max-height设置为100％，或者将子div与大小div相对于父div的比例设置为。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="overflow:hidden;max-width:100%; max-height:100%; width:500px;height: 500px;border: 2px solid grey;">
  <div class="child_div1" style="width:300px;max-width:100%; max-height:100%; height: 100px;border: 2px solid black;"></div>
  <div class="child_div2" style="width:400px;max-width:100%; max-height:100%; height: 100px;border: 2px solid red;"></div>
</div>

您还应该查看：https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Answer 2

您可以使用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。

希望它有所帮助！

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

2 个答案: