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

Question

当我的表格在小屏幕尺寸时，它显示正确，但当我增加宽度时，它显示不正确。有任何想法吗？这是正常的还是有办法让它很好地定位？这是我的 fiddle :

jsfiddle.net/aX86d/

如果有人能为我提供一个新手友好指南的教程，我将不胜感激发生。

Answer 1

如果您的问题是当屏幕宽度增加时高度增加，这是因为您的 block (blockA 和 blockB)和#user 元素具有百分比宽度。所以，当宽度增加时，由于屏幕的宽度增加，如果元素的高度也增加，就会导致这个问题。一个好的解决方案是在 CSS 中指定一个最大高度，例如:

max-height: 30px;

把30px改成你想让元素得到的最大，然后试试看。该元素的大小不会超过最大高度。

查看更新后的 fiddle :http://jsfiddle.net/aX86d/3/

编辑:

由于您的问题是水平间距，我建议使用绝对定位。无论何时绝对定位元素，它的父元素都必须相对定位。然后我将顶部和底部设置为 0，将边距设置为自动 8px，用于自动顶部底部和 8ps 左右。这使元素垂直居中。看这个fiddle .

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

关于绝对定位的信息:

参见 this page关于相对定位中的绝对定位。

基本上，这个页面说如果绝对位置元素在相对位置元素内，它的顶部、底部、左侧和右侧样式将相对于父元素。否则，它将相对于 body，而不是它的父级。查看提到的页面上的图片，它们可能会帮助您更好地理解。