个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
这让我抓狂了一段时间——我想结合 jQuery Cycle Lite plugin具有简单的液体布局。
我的问题是幻灯片下方的内容在其下方消失了——当幻灯片 JS 处于事件状态时，包含幻灯片的 div 似乎高度为 0px。如果我删除幻灯片代码(只使用静止图像)，div 会被其中的图像推到正确的高度。
由于幻灯片放映本身会随着流式布局缩放，所以我无法为幻灯片放映指定 px 高度。谁能建议解决方法？
代码在下面，但它可能有助于查看我一直在使用的示例 http://jsbin.com/ubufi5/edit .
感谢阅读!
HTML/CSS:
<head>
<meta charset="utf-8" />
<title>Slideshow in a liquid layout</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://misc.somnambulist.org/jquery.cycle.lite.1.0.js"></script>
<style type="text/css">
body { max-width: 1120px; margin: 100px auto; border: 1px solid #ff0; background: #666;}
body img { width: 100%; }
</style>
</head>
<body id="home">
<h1>Test</h1>
<div id="slidebox">
<img src="http://misc.somnambulist.org/test2.jpg" />
<img src="http://misc.somnambulist.org/test4.jpg" />
</div>
<h2>Lots of text here so it clears the image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
JS:
$(function() {
$('#slidebox').cycle();
});
最佳答案
我已经使用下面的 jQuery 解决了这个问题，它检查加载时最高的图像并在调整窗口大小时 (example here) 相应地保持 #slidebox div 的高度，但是我我打算让这个问题暂时悬而未决，希望有一些令人难以置信的基本 CSS 东西我以某种方式忽略了，或者至少解释了为什么我会遇到这个问题。
function SetHeightToTallestChild(i) {
var tallest = 0;
$(i).children().each(function(){
var h = $(this).height();
if(h > tallest)
tallest = h;
});
$(i).height(tallest);
}
$(document).ready(function() {
SetHeightToTallestChild('#slidebox');
$(function() {
$('#slidebox').cycle();
});
$(window).resize(function() {
SetHeightToTallestChild('#slidebox');
});
});
关于css - 结合 jQuery Cycle (Lite) 和流式布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5117293/
25
4
0
我刚刚更新了 Ruby，现在我在尝试启动 compass 时遇到以下错误: Encoding::CompatibilityError on line ["28"] of /usr/local/Cell
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 6 年前。
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在尝试在我的 iOS 应用程序中开发可折叠/ Accordion 式的功能。这将是您可以在网站上找到的典型 FAQ 类型功能。我想点击标题，然后显示详细信息。 因为这是帮助部分，只有几个项目，我认
我正在尝试设计一个基于 REST 的 Web 服务来与我正在开发的农场动物管理系统进行交互。 为了详细说明问题，我收藏了动物 属于一个农场。每只动物都有自己的信息——例如姓名、身份证号、品种年龄等。因
我有 3 种不同的表单，其中复选框数量不同，每个部分基本上代表一个表单，因此当用户选择该部分中的复选框时，它会显示他们在该部分的总金额中 checkout 了多少 HTML
我有一份 32 页的 PDF 版家谱。与其将家谱全部放在一个非常大的 PDF 页面上(这是我想要的)，不如将其格式化为一组 8 个单独的美国信纸大小的页面应该在整个宽度上缝合； 4 行这样就完成了树。
指SASS implementation for Java? : 在 Maven 目标编译包中自动编译 compass-style.org 样式表的最佳方法是什么？ 我不想发送太多的自编译库，也不想通
鉴于以下 XAML... 我正在寻找一种绑定(bind) ComboBox、Button 和 Command 的方法，以便当 ComboBox 的值更改时，在 Command 上调用 CanExe
在玩具应用程序中，我有一个显示所有帖子标题的“帖子”模板。当您单击每个标题时，我不想直接进入“显示” View ，而是直接内联展开该帖子的其余内容。 我考虑过让 postRoute 重用 postsR
我需要一些使用 Twitter Bootstrap 或其他响应式框架的自定义 Swagger-UI 实现。需要在我的移动设备上使用这样的 UI 测试我的 API，但 swagger-ui 不能很好地扩
我正在做一个项目，我真的在尝试编写面向对象的 JavaScript 代码。我刚刚开始阅读Douglas Crockford's JavaScript: The Good Parts我很快开始意识到用
在 C# 中，我通过执行以下操作来加密文本数据(请注意我正在以 block ( block )的形式加密数据): public string EncryptData(string pu
我正在构建一个社交网站，该网站将向全世界公开 REST API (WCF WebAPI)，以便任何开发人员都能够为该网站创建客户端应用程序、将其与其他服务集成等。 我想为 API 实现 Faceboo
我是一名优秀的程序员,十分优秀！