使用css设置div外部宽度 [英] Set div outerwidth using css

问题描述

我想知道是否有办法使用设置 div 的 outerwidth css 可忽略填充和边框。

当我将 div 设置为 50％宽度，填充和边框将增加宽度。

我怎么能解决没有 javascript 或 jQuery.outerWidth ？

编辑

不想再添加其他元素

解决方案

我想知道是否有办法使用css来设置div的外部宽度来忽略填充和边框。

您可以使用 box-sizing：border-box code>和 border 在 width 中计数：

  div {
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
} 
  

请参阅：http://jsfiddle.net/thirtydot/6xx3h/

浏览器支持：http://caniuse.com/css3-boxsizing

规格： http://www.w3.org/TR/css3-ui/#box-sizing p>

I'm wonder if there is way to set outerwidth of a div using css to ignore padding and borders.

When i set a div to be 50% width, padding and border will add to the width.
how could i solve that without javascript or jQuery.outerWidth() ?

edit
Don't want to add another extra element

解决方案

I'm wonder if there is way to set outerwidth of a div using css to ignore padding and borders.

You can use box-sizing: border-box to make padding and border be counted inside width:

div {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

See: http://jsfiddle.net/thirtydot/6xx3h/

Browser support: http://caniuse.com/css3-boxsizing

The spec: http://www.w3.org/TR/css3-ui/#box-sizing

这篇关于使用css设置div外部宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！