1

サイズ変更可能な領域には、並べてサイズ変更したい 2 つの領域が含まれています。各領域の水平方向の成長率は 1:1 ですが、含まれる 2 つの領域が並んでいるため、それらの幅の合計はコンテナーの 2 倍の速さで成長します。含まれている 2 つの領域の水平方向の成長を半分にカットするにはどうすればよいですか。

<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は、追加の要素をメインのサイズ変更可能な要素と同じピクセル数だけサイズ変更するように見えますが、期待どおりにパーセンテージでサイズ変更されません。

これを解決するには：

  • alsoResizeを削除しました
  • テーブルを削除しました
  • 子要素を左にフロートさせました
  • #resizabledivを相対的に配置
  • 子divのサイズをパーセンテージベースにしました。

これにより、子は、alsoResizeなしで自動的にサイズ変更されます。これがあなたのケースで機能するかどうかはわかりませんが、可能な場合はDOMにサイズ変更を処理させる必要があるようです。

例：

http://jsfiddle.net/JaPvZ/

もちろん、これは子divの周囲の間隔を考慮しないことに注意してください。つまり、不要な間隔ができてしまう可能性があります。

于 2010-12-01T00:50:26.410 に答える