我怎样才能保持div'；相对于具有jQuery和jQuery UI的可调整大小的div的宽度？

如何使用jQuery和jQuery UI保持div相对于可调整大小的div的宽度。我有以下代码：

<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>
<div id="auto-resize">
    <h3 class="ui-widget-header">Resize auto</h3>
</div>
<script type="text/javascript">
    $(function() {
        $("#resizable").resizable();
    });
</script>

可调整大小
自动调整大小
$（函数（）{
$（“#可调整大小”）.resizable（）；
});

---

如何在调整大小时保持“自动调整大小”div与“可调整大小”div相同？

您可以使用事件

resize

from

resize

并在其中设置另一个div的大小：

<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>
<div id="auto-resize">
    <h3 class="ui-widget-header">Resize auto</h3>
</div>
<script type="text/javascript">
    $(function() {
        $("#resizable").resizable({
            resize: function( event, ui ) {
                $("#auto-resize").width(ui.size.width);
                $("#auto-resize").height(ui.size.height);
            }
        });
    });
</script>

可调整大小
自动调整大小
$（函数（）{
$（“#可调整大小”）。可调整大小({
调整大小：函数（事件、ui）{
$（“#自动调整大小”）.width（ui.size.width）；
$（“#自动调整大小”）.height（ui.size.height）；
}
});
});

---

jsFiddle here:

生成了一个

调整大小

事件，因此您只需执行以下操作：

$("#resizable").resizable().on('resize', function(){
  $('#auto-resize').width($(this).width());
});

---

这里可以使用jQuery

resize

事件

$(function() {
    $("#resizable").resizable()
    .resize(function() {
        $("#auto-resize")
            .height($(this).height())
            .width($(this).width());
    });
});