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

Question

我正在开发一个简单的内容滑块。但是，当新内容滑入时，容器不会扩展。我假设这是因为内容项的位置设置为绝对。但是，如果它们没有绝对定位，那么内容项就不能正常排列。

我的问题是：当下一个内容项目滑入时，如何让容器（#triv_cont）扩展？如果解决方案不是绝对定位内容项，那么如何让内容项排成一行？我尝试过vertical-align：top而没有运气。

测试代码在这里 - ＆gt; 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');

容易...