1

我有一个可调整大小的区域，其中包含两个我也想并排调整大小的区域。每个区域的水平增长比例为 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>
4

1 回答 1

-1

我看到了几个问题。首先，您将可实现的 div 放在表格中。这似乎有点矛盾。

其次，alsoResize 似乎将附加元素的大小调整为与主要可调整大小元素相同的像素数，它不会像您预期的那样将它们调整为百分比。

为了解决这个问题，我：

  • 删除了也调整大小
  • 删除了表
  • 左浮动子元素
  • 相对定位#resizable div
  • 使子 div 的大小基于百分比。

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

例子：

http://jsfiddle.net/JaPvZ/

当然，需要注意的是，这并没有考虑到子 div 周围的间距。这意味着您仍然可能最终得到一些您不想要的间距。

于 2010-12-01T00:50:26.410 回答