css - 在 CSS 中计算像素和百分比的更好方法（或替代方法）？

Question

我并不是说我懒得做数学，但是有没有更好的方法来执行这个任务：我有一个宽度为 960px 的页面，里面有 2 个宽度为 50% 的 div。这很简单，但是如果我想添加 1px 边框，我必须计算 960/0.5 减去边框的额外像素，它们应该是 4px 但奇怪的是它们被计为 2px（2 个 div 的左侧和右侧对吗？）。此外，当我添加边距和填充时，我必须再次计算所有内容。假设我添加了 10px 边距，我必须将 % 转换为 px，有时它会给我带来烦人的数字，例如 760.25px。我想知道您是否使用了更好的方法，或者是否没有必要这样做。谢谢。

Answer 1

如果您使用容器的固定宽度，为什么要使用 % 作为内部 DIV。除非您使用百分比，否则它没有任何意义。当然你可以使用 box-sizing，但它会伤害旧的浏览器。

Answer 2

您可以添加更多元素来调整大小：

<div style="width:960px;overflow:hidden;">
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
</div>

您可以对没有边距、边框或填充的元素使用百分比，并且您可以在内部具有自动宽度的元素上使用边距、边框和填充。

Answer 3

box-sizing CSS 属性（如果你不关心 IE<8）

Answer 4

如果您的“div”有背景图片，您可以通过在背景图片中集成边框来破解。

但是如果你的“div”有一个固定的宽度，你应该计算宽度，以免对其他网络浏览器感到惊讶。