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

标签 jquery jquery-ui css

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

因此,我的问题是:如何让容器 (#triv_cont) 在下一个内容项滑入时展开?如果解决方案不是绝对定位内容项,那么如何让内容项对齐?我试过 vertical-align:top 但没有成功。

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

内容项的 CSS 选择器是:

#promos .trivia #triv_cont div

容器是:

#promos .trivia #triv_cont

我已经回顾了一些与此相关的问题,但似乎找不到解决方案...

最佳答案

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

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

然后

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

简单...

关于jquery - 具有动态高度的简单内容 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14576244/

相关文章:

css - 无法单击任何链接,因为 wordpress 中的元素覆盖了它们

html - 我的 CSS/HTML 有一个明显的重大缺陷

jQuery 日期选择器仅显示年月

jQuery UI sortable 不支持 float div?

jquery - 如何将焦点放在 jquery ui 对话框小部件上?

javascript - 无法从并行 ajax 调用中检索数据

c# - 将 asp.net 页面转换为 Word 文档

javascript - 当我在 jquery 中修改 HTML 时如何刷新对象?

javascript - JQuery 选择器 : get one of multiple class names, 作为字符串

jquery - Bootbox 确认对话框问题