jQuery의 CSS3 요소 너비

Question

jQuery UI 탭이있는 div에 div를 배치하면 약간의 문제가 발생합니다. 논리적 인 해결책을 찾지 못했습니다. (논리적 인 해결책을 찾지 못하고 제대로 작동하지 않습니다.) , 속성 및 편집 상자을 도구 모음 그들에게 전화 -

문제는 내가 jQuery를 탭보기가이

1. 가 가장 상단 탭은 세 개의 패널 (div의)가
2. 세 개의 탭 (그것은 용기를 호출)입니다
3. 세 세 번째가 갖는 왼쪽 떠있는 명확한 : 바로
4. 이 세 가지가 3px의의 badding과 1 픽셀 테두리가 설정
5. 세 가지가 박스 크기 : 국경 박스
6. 첫 번째 두 개는 각각 40px 및 200px입니다.
7. CSS에서 editbox의 너비가 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

width() 대신 outerWidth() 기능을 사용해보십시오. outerWidth에 대한 jQuery의 문서에서 :

픽셀 단위로 왼쪽과 오른쪽 패딩, 테두리, 선택적으로 여유와 함께, 요소의 폭을 돌려줍니다.

은 자세한 내용보기 : http://api.jquery.com/outerWidth/