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

前端之家收集整理的这篇文章主要介绍了CSS流体布局:margin-top基于百分比增长时容器宽度增加前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How to set the margin or padding as percentage of height of parent container?6个答案我只是学习CSS流体布局&响应式设计,我试图使用布局中没有px值的所有百分比值。

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

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

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

解决方法

在CSS中,所有四个边距:和填充:百分比是相对于宽度…即使这可能看起来荒谬。这只是CSS规范的方式,没有什么你能做的。

你能用’ex'(或’em’)做你想要的吗?这是我习惯看到“流体”值的margin / padding指定…,它可能不会比百分比问题。 (虽然我没有相关的第一手经验,我怀疑以后的计算百分比值的极长的精度将为您设置为浏览器不兼容问题我的样式是将CSS百分比限制为整数,如果可能的话,或偶尔也许一个或有时甚至在小数点后两位数字。)

如果你真的想要一个确切的任意大小的空垂直空间是容器的百分比,我想到的第一件事是一个单独的空& div>与“height:nn%”CSS规范。或者,你指定的其他东西已经处理了你想要的垂直尺寸(因为看起来边缘在垂直尺寸上根本没有做任何事情)。

猜你在找的CSS相关文章