需要有关调整大小问题的提示和指南

Question

当我的表单是小尺寸的屏幕大小时，它可以正确显示，但是当我增加宽度时，它不会正确显示。 有任何想法吗？ 这是正常现象还是有办法使其定位良好？ 这是我的小提琴：

jsfiddle.net/aX86d/

如果有人可以为我提供有关noob友好指南的教程，以便在为应用程序目的创建小/宽浏览器时保持整个网络的外观，那么肯定会出现不同的屏幕分辨率用法。

Answer 1

如果您的问题是屏幕宽度增加时高度增加，那是因为您的块（blockA和blockB）和#user元素的宽度为百分比。 因此，当宽度增加时，由于屏幕的宽度增加，如果元素的高度也增加，则会导致此问题。 一个好的解决方案是在CSS中指定最大高度，例如：

max-height: 30px;

将30px更改为您希望元素获得的最大像素，然后尝试。 元素的大小不会超过最大高度。

看到这个更新的小提琴： http : //jsfiddle.net/aX86d/3/

编辑：

由于您的问题是水平间距，因此建议您使用绝对定位。 每当将元素定位为绝对元素时，其父元素都必须相对放置。 然后，我将top和bottom设置为0，并将margin设置为auto 8px（对于自上而下），以及8ps左右。 这将使元素垂直居中。 看到这个小提琴。

我应该提到CSS calc()函数在某些较旧的浏览器中不起作用，但在所有当前流行的浏览器中都起作用。

有关绝对位置内部相对位置，请参见this page 。

基本上，该页面说，如果绝对位置元素位于相对位置元素内，则其top，bottom，left和right样式将相对于父样式。 否则，它将是body相对对象，而不是父对象。 查看提到的页面上的图像，它们可以帮助您更好地理解。