使用css设置div outerwidth

Question

我很想知道是否可以使用outerwidth设置div的{​​{1}}来忽略填充和边框。

当我将css设置为div宽度时，填充和边框将添加到宽度。
如果没有50%或javascript，我怎么能解决这个问题？

修改
不想添加其他额外元素

Answer 1

  

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

您可以使用box-sizing: border-box在padding内计算border和width：

div {
    box-sizing: border-box;
}

见：http://jsfiddle.net/thirtydot/6xx3h/

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

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

Answer 2

在你的内部嵌套另一个div，并将填充/边框应用于嵌套的：{/ p>

<div style="width:50%;"> <div style="padding:5px;">  ....  </div> </div>

不幸的是，没有纯粹的CSS方法来实现这一点（或者至少我不知道一个）。

Answer 3

我假设您不想添加更多元素并以稍微不同的方式回答您的问题。

1. 浏览器（而不是样式表）确定相对度量的实际大小，例如em和％。
2. 没有通用/标准机制将计算数据从浏览器的内部布局引擎反馈回样式表（这可能是一个危险的循环问题）。

真的，唯一的办法是：

1. 使用固定宽度尺寸并在您的样式中添加像素计算。
2. 使用JavaScript或相关框架来实现结果。

Answer 4

如果可能的话，我只想在div中添加一个div。

<div id="outerwidth">
  <div class="inner">
   //Content
  </div>
</div>

.outerwidth { width: 50%; }
.inner { padding: 20px; }

Answer 5

您可以将分配给宽度的50％值拆分为：

width: 46%;

margin: 0 1%; // 0 top/bottom and 1% each for left and right

padding: 0 1%; // same as above

您可以重新计算百分比以满足您的需求，只要总数为50％就可以了。

我会避免使用js修复小的化妆品问题，因为这不适用于js off并会为客户端的浏览器增加额外的工作量 - 想想移动设备，你就会明白为什么性能很重要！