jQuery中的CSS3元素宽度

Question

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

问题是这样的

1. 我有一个带有三个选项卡的 jQuery 选项卡视图（称为容器）
2. 最顶部的选项卡包含三个面板 (div) - 将它们称为工具栏、属性和编辑框
3. 所有三个都向左浮动，第三个具有 clear:right 设置
4. 这三个都有 3 像素的标记和 1 像素的边框
5. 这三个都有 box-sizing:border-box
6. 前两个分别是 40px 和 200px 宽。
7. 第三个面板的宽度，编辑框在 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)

Answer 1

尝试使用outerWidth() 函数而不是width()。来自 jQuery 的 outerWidth 文档：

返回元素的宽度，以及左右内边距， 边框，以及可选的边距，以像素为单位。

查看更多：http://api.jquery.com/outerWidth/