使用图像高度（）设置另一个元素的边距答案

【问题标题】：Use image height() to set another element's margin使用图像高度（）设置另一个元素的边距
【发布时间】：2013-06-12 05:16:24
【问题描述】：

我正在尝试使一个 DIV 的上边距等于另一个元素的高度。

我无法让它在 Chrome 中运行。在 FF 和 IE9 中似乎很好。

我正在使用 height() 来获取图像的高度。

然后我从另一个 DIV 的上边距中减去该值

var GalleryImgHeight = $("#container #gallery img").height();
$("#content_container").css("margin-top", - GalleryImgHeight);

<div id="container">
<div id="gallery"><img src="images/1.jpg" alt=""></div>
<div id="content_container">Lorem ipsum dolor sit amet, consectetuer.......</div>
</div>

我在 resize 函数中有相同的代码，因此如果他们调整浏览器大小，它会重新计算。

对于 Chrome，它仅适用于调整大小。我猜测初始函数是在加载图像之前获取高度。

我没有收到任何错误。

我应该尝试预加载图像吗？

完整代码如下：http://troythibodeaux.com/temp/webdev/

我这样做的原因是让一个 DIV 堆叠在另一个 DIV 之上。两个DIV是相对放置的，因为底部DIV的宽度是100%，所以它的尺寸取决于浏览器的大小。如果我错了，请告诉我，但我不能将顶部 DIV 的位置设置为绝对位置，因为我希望它在浏览器中居中。所以我不能真正将“left”属性设置为静态值。

也许我采取了错误的方法，但很想听听另一种看法。

【问题讨论】：

标签： jquery height

【解决方案1】：

Gordan 的回答很好，但需要更改代码才能使以下行正常工作：

var origMarginTop = $("#content_container").css("margin-top");

因为它返回完整的 css 值的字符串，即。 “10 像素”。显然你不能从 10px 中取一个纯数字，你需要它只是 10。（例如 10px-180 行不通，10-180 行）

为了让它工作，我建议以下几行（添加 1 行，更改第 3 行）：

var marginTopString = origMarginTop.slice(0, -2);

if (GalleryImgHeight !== 0) {
$("#content_container").css("margin-top", marginTopString - GalleryImgHeight);

对代码的这种修改对我来说很好。

【讨论】：