我只是在学习 CSS 流体布局和响应式设计，我正在尝试在布局中使用所有没有 px 值的百分比值。
到目前为止，它似乎正在工作，但在一个地方，我看到了一些我没想到的东西。我试图在两个垂直堆叠的 div 之间放置一个边距，这些 div 会根据容器的高度而变化。我希望当我垂直调整窗口大小时，边距会改变，但如果你水平调整它的大小，它也会增长，这是我不想要的。我错过了什么？
这是一个小提琴。提前感谢您的帮助。
问问题
37490 次
2 回答
52
在 CSS 中，所有四个 margin: 和 padding: 百分比都是相对于宽度的 ......即使这看起来很荒谬。这就是 CSS 规范的方式，你无能为力。
你能用'ex'（或'em'）做你想做的事吗？这就是我习惯于看到指定边距/填充的“流动”值的方式......而且它可能比百分比问题更少。（虽然我没有相关的第一手经验，但我怀疑您计算的百分比值的极长精度会在以后为您设置浏览器不兼容问题。我的风格是尽可能将 CSS 百分比限制为整数，或者有时可能是小数点后一位或有时甚至两位数。）
如果你真的想要一个精确的任意大小的空垂直空间，它是容器的百分比，我首先想到的是一个单独的空 < div > 具有“高度：nn%”的 CSS 规范。或者您指定的其他东西可能已经按照您希望的方式处理垂直尺寸（因为看起来边距在垂直调整大小时根本没有做任何事情）。
于 2012-05-17T03:34:12.763 回答
1
是的，这是出乎意料和违反直觉的，但它按设计工作，我不知道为什么它会这样工作。当窗口高度减小时，查看边距顶部百分比不会改变
于 2012-05-17T03:12:44.777 回答