当我们触发父调整大小 div 时,我们如何调整子 div 的大小
How can we resize child div when we trigger parent resize div
我总共有 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>
只需将 max-width 和 max-height 设置为 100% 或任何您希望子 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/
您可以使用 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。
希望对您有所帮助!
我总共有 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>
只需将 max-width 和 max-height 设置为 100% 或任何您希望子 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/
您可以使用 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。
希望对您有所帮助!