Question

我试图让一个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的宽度是100％，所以它的尺寸将取决于浏览器的大小。告诉我，如果我错了，但我不能将顶级DIV的位置设置为绝对，因为我希望它在浏览器中居中。所以我无法将“left”属性设置为静态值。

Mabye我采取了错误的方法，但是很想听到另一种看法。

Answer 1

Gordan给出了很好的答案，但需要对代码进行更改才能使以下行工作：

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

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

要使这个工作，我会建议以下几行（添加1行，第3行更改）：

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

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

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

使用image height（）设置另一个元素的边距

1 个答案: