-1

jQuery UI のタブ付き div 内に div を配置すると、論理的な解決策が見つからないという小さな問題が発生しました (非論理的な解決策があり、それが機能します)。

問題はこれ

  1. 3 つのタブを持つ jQuery タブ ビュー (コンテナーと呼びます) があります。
  2. 最上部のタブには 3 つのパネル (div) があり、ツールバー、プロパティ、編集ボックスと呼びます。
  3. 3 つすべてが左にフロートされ、3 つ目は clear:right 設定になっています。
  4. 3 つすべてに 3px のバディングと 1px の境界線があります
  5. 3 つすべてに box-sizing:border-box があります
  6. 最初の 2 つは、それぞれ 40 ピクセルと 200 ピクセルの幅です。
  7. 3 番目のパネルの幅、editbox は CSS で 100px に設定されています
  8. 次に、jQuery のスポットを使用して、その幅を変更して使用可能な領域を埋めようとします。計算は次のようになります

わかりません-border-boxを指定するだけですべてが処理され、パディングとボーダーについて二度と心配する必要はないと思いました。明らかに、私の理解が間違っています。助けていただければ幸いです。

 var w = $('#container').width() - $('#toolbar').width - $('#properties').width;

//Now if I assign that to the editbox

$('#editbox').css('width',w + 'px') //I find that editbox flows down below the other two.  In order for things to work I have to deduct 24 fom the width calculation above.  i.e.

w -= 3x2*padding (2px) + 3*1*border(1 px)
4

1 に答える 1

0

outerWidth()の代わりに関数を使用してみてくださいwidth()。のjQueryのドキュメントからouterWidth：

要素の幅を、左右のパディング、ボーダー、およびオプションでマージンと共にピクセル単位で返します。

詳細: http://api.jquery.com/outerWidth/

于 2012-07-11T17:46:13.363 に答える