jQuery中的CSS3元素宽度 [英] CSS3 element width in jQuery

问题描述

将div放入jQuery UI选项卡式div时遇到了一个小问题，我无法找到一个逻辑解决方案(我已经安装了不合逻辑的解决方案并且可以正常工作).

I have run into a little issue with placing divs inside a jQuery UI tabbed div to which I cannot find a logical solution (the illogical one I have in place and it works).

问题是这个

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

我不明白-我认为指定border-box只会处理所有事情，而我再也不需要担心padding和border了.显然，我的理解是错误的.非常感谢您的帮助.

I don't get it - I thought specifying border-box simply takes care of everything and I never need to worry about padding and border ever again. Evidently, I have got my understanding wrong. I'd much appreciate any help.

 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)

推荐答案

尝试使用outerWidth()函数而不是width().摘自jQuery的outerWidth文档:

Try using the outerWidth() function instead of width(). From jQuery's documentation for outerWidth:

返回元素的宽度以及左右填充， 边框，以及可选的边距(以像素为单位).

Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.

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

这篇关于jQuery中的CSS3元素宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！