-1

我在将 div 放置在 jQuery UI 选项卡式 div 中时遇到了一个小问题，我找不到一个合乎逻辑的解决方案（我有一个不合逻辑的解决方案并且它有效）。

问题是这个

  1. 我有一个带有三个选项卡的 jQuery 选项卡视图（称为容器）
  2. 最顶部的选项卡有三个面板 (div) - 称它们为工具栏、属性和编辑框
  3. 所有三个都向左浮动，第三个具有 clear:right 设置
  4. 这三个都有一个 3px 的标记和一个 1px 的边框
  5. 这三个都有 box-sizing:border-box
  6. 前两个分别是 40px 和 200px 宽。
  7. 第三个面板的宽度，editbox 在 CSS 中设置为 100px
  8. 然后我尝试使用 jQuery 来更改该宽度以填充可用区域。计算是这样的

我不明白 - 我认为指定边框框可以简单地处理所有事情，我再也不需要担心填充和边框了。显然，我的理解是错误的。我非常感谢任何帮助。

 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 回答