使用 JQuery 使 div 坚持非儿童 div

Question

所以我想在 Owl-Carousel 2.0 中制作一个双滑块， 第一个滑块有 9 个图像，这意味着它有 9 个点。这些点放在一个容器中，#customdots。我试图使这些点的位置：水平居中（有效），并出现在第二个滑块的顶部，因此位置，底部应该是第二个滑块的高度（#sync2）。 我尝试使用 JQuery 来执行此操作，代码行如下：

$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");

但是，这不会获得实际的#sync2 高度，并且不会在移动 window 时更新，使用 height() 也不会。

如果这个#customDots div 不能成为#sync2 的子项，我将如何使其保持在#sync2 的顶部？

在此处查看完整代码笔：http://codepen.io/JJvanSteijn/pen/aJxgdW

Answer 1

我会将 #sync2 包裹在一个元素中（我创建了 #sync2Container），使用该新元素将第二个滑块定位在 window 的底部，然后只需添加点到该元素的顶部。 http://codepen.io/mcoker/pen/JWgKxJ

Answer 2

您需要为 #sync2 添加高度到 CSS:

#sync2{height:210px}

并使用JS代码获取高度：

$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());

希望有用。