在jQuery中的CSS3元素宽度

Question

我遇到了一个小问题，将div放在一个jQuery UI选项卡式div中，而我找不到一个逻辑解决方案（这个逻辑解决方案不合逻辑）。

问题是这样的

1. 我有一个jQuery标签视图包含三个选项卡
2. 最上面的选项卡有三面围板（申报单）（称之为集装箱） - 给他们打电话的工具栏，属性和编辑框
3. 所有这三个向左浮动与具有第三个明确的：正确设置
4. 所有这三个有一个3px的badding和像素边框
5. 三个都盒大小：边界盒
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/