jquery - 具有动态高度的简单内容滑块

Question

我正在开发一个简单的内容滑块。但是，当新内容滑入时，容器不会扩展。我认为这是因为内容项的位置设置为绝对。但是，如果它们不是绝对定位，则内容项不会正确排列。

因此，我的问题是：如何让容器 (#triv_cont) 在下一个内容项滑入时展开？如果解决方案不是绝对定位内容项，那么如何让内容项对齐？我试过垂直对齐：顶部没有运气。

测试代码在这里-> http://codepen.io/lukeocom/pen/mHyBv

内容项的 CSS 选择器是：

#promos .trivia #triv_cont div

容器是：

#promos .trivia #triv_cont

我已经审查了一些关于此的问题，但似乎无法找到解决方案......

Answer 1

我通过在按下下一个按钮时将容器的高度设置为下一个内容项的高度来解决这个问题。

thisHeight = $('#' + selx).height() + 20;

进而

$('#triv_cont').animate({height: (thisHeight + 'px')}, 1000, 'swing');

简单的...