jQuery可调整大小'；s alsoResize：如何降低内部resize div'；s_Jquery_Resizable_Jquery Ui Resizable

jQuery可调整大小'；s alsoResize：如何降低内部resize div'；s

jquery

jQuery可调整大小'；s alsoResize：如何降低内部resize div'；s,jquery,resizable,jquery-ui-resizable,Jquery,Resizable,Jquery Ui Resizable,我有一个可调整大小的区域，其中包含两个我还希望并排调整大小的区域。每个区域的水平增长率为1:1，但由于两个包含区域并排，其宽度总和的增长速度是其容器的两倍。如何将两个包含区域的水平增长减半 <html> <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css"/

我有一个可调整大小的区域，其中包含两个我还希望并排调整大小的区域。每个区域的水平增长率为1:1，但由于两个包含区域并排，其宽度总和的增长速度是其容器的两倍。如何将两个包含区域的水平增长减半

<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css"/>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
</head>
<body>
<style>
  #resizable { background-position: top left; }
  #resizable { width: 300px; height: 120px; padding: 0.5em; }
  #also1, #also2 { width: 75px; height: 60px; padding: 0.5em; }
  #resizable h3, #also1 h3 , #also2 h3 { text-align: center; margin: 0; }
  #also1, #also2 { margin-top: 1em; }
</style>
<script>
  $(function() {
    $( "#resizable" ).resizable({
      alsoResize: "#also1,#also2"
    });
  });
</script> 
<div id="resizable" class="ui-widget-header">
  <h3 class="ui-state-active">Resize</h3>
  <table>
    <tr>
      <td>
        <div id="also1" class="ui-widget-content">
          <h3 class="ui-widget-header">also one</h3>
        </div>
      </td>
      <td>
        <div id="also2" class="ui-widget-content">
          <h3 class="ui-widget-header">also two</h3>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>


#可调整大小{背景位置：左上；}
#可调整大小{宽度：300px；高度：120px；填充：0.5em；}
#also1，#also2{宽度：75px；高度：60px；填充：0.5em；}
#可调整大小的h3、#also1 h3、#also2 h3{文本对齐：居中；边距：0；}
#also1，#also2{页边顶部：1em；}
$（函数（）{
$（“#可调整大小”）。可调整大小({
alsoResize:“also1，#also2”
});
});
调整大小
也是一个
还有两个

我发现了几个问题。首先，将可实现div放入表中。这似乎有点矛盾

其次，alsoResize似乎将附加元素的大小调整为与主可调整大小元素相同的像素数，但它并没有按照您可能期望的百分比来调整它们的大小

为了解决这个问题，我：

删除了alsoResize
把桌子移走
左浮动子元素
相对定位#可调整大小的div
使子div的大小基于百分比

这会使子对象自动调整大小，而无需调整大小。不确定这是否适用于您的情况，但似乎应该让DOM在可能的情况下处理大小调整

例如：

当然，应该注意的是，这并不考虑子div周围的间距。这意味着你仍然有可能以一些你不想要的间隔结束。

我需要also1和also2并排，因此这张桌子。我还需要将它们紧密地绑定到可调整大小的块的边缘。但谢谢你。这不符合你的哪些要求？唯一的一个问题是，当您将可调整大小的元素设置得太小时，also2会低于also1。可以通过设置最小宽度/最小高度来防止这种情况。