在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/