CSS流体布局:基于百分比的margin-top在容器宽度增加时增长

时间:2012-05-17 03:01:18

标签: css margin responsive-design fluid-layout

我只是在学习CSS流体布局&响应式设计,我试图在布局中使用没有px值的所有百分比值。

到目前为止它似乎正在起作用,但在一个地方,我看到了一些我没想到的东西。我试图在两个垂直堆叠的div之间放置一个边距,这个div根据容器的高度而变化。当我垂直调整窗口大小时,我希望边距会改变,但如果你水平调整它,它也会增长,这是我不想要的。我错过了什么?

这是一个小提琴。感谢您的帮助。

http://jsfiddle.net/gregir/aP5kz/

2 个答案:

答案 0 :(得分:51)

在CSS中,所有四个边距:和填充:百分比是相对于宽度 ...即使这看起来似乎没有意义。这就是CSS规范的方式,你无能为力。

你可以用'ex'(或'em')做你想做的事吗?这就是我习惯于看到指定边距/填充的“流动”值的方式......并且它可能比百分比更少问题。 (虽然我没有相关的第一手经验,但我怀疑计算出的百分比值的极长精度会让您在以后遇到浏览器不兼容问题。我的风格是限制CSS如果可能的话,整数的百分比,或偶尔可能是小数点后的一个或有时甚至两个数字。)

如果你真的想要一个确切的任意大小的空垂直空间,它是容器的一个百分比,那么我想到的第一件事就是一个单独的空的< div>具有“height:nn%”CSS规范。或许你指定的其他东西已经按照你想要的方式处理垂直尺寸(因为看起来边缘在垂直尺寸调整时根本没有做任何事情)。

答案 1 :(得分:1)

是的,这是出乎意料的,反直觉的,但它的工作原理与设计相同。我不知道它为什么会像它一样工作。见margin-top percentage does not change when window height decreases