Question

我的问题是如何用百分比来管理元素的大小（让我们说一个div）。我有一种情况，我让两个div并排浮动，两者都占用了包含它们的div的50％。这两个div中的每一个都具有1px的边界，5px的边距和一些填充。那我该如何管理这些静态大小和内容的动态大小（div）。因为我刚刚提到的情况，它们不会并排浮动，因为边框，填充和边距会使尺寸超过（100％）。

有什么解决方案？在我的情况下，边距/填充/边框的大小很小，所以我想我可以设置一个较低的尺寸（如45％），并希望它适合。但我认为这种方法很草率，因为如果我将填充的大小设置得更高，我将不得不通过试验和错误来调整div的大小，直到找到完美的大小。有没有正确的方法来实现这一目标？

非常感谢。

Answer 1

来自https://developer.mozilla.org/En/CSS/Box-sizing

/* support Firefox, Safari/WebKit, Opera and IE8+ */

.example {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

你可以使用box-sizing：border-box，然后50％然后应用于内部+填充+边框，但遗憾的是没有设置来添加边距。

然而，您可以在div中使用div并在外部div上使用填充来模仿边距。

这是一个例子JSFiddle

Answer 2

通过使两个浮动div具有0边距和0边界，宽度为50％，可以进行干净的工作。然后在每个内部你可以放一个适合其容器的div，带有静态边距和填充。

作为替代方案，你可以保持一切动态，所以像保证金一样：1％，你会在窗口大小调整中获得一个很好的行为！

如何管理动态大小（百分比）的边框，填充，边距？

2 个答案: