css - 结合 jQuery Cycle (Lite) 和流式布局

标签 css jquery-plugins jquery-cycle

这让我抓狂了一段时间——我想结合 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/

相关文章:

jQuery 循环插件,每张幻灯片具有不同的超时值

css - 使垂直流向水平的按钮组干净利落

javascript - 旋转轮或360度旋转轮

javascript - 带有 setInterval 的 jQuery 插件作用域

javascript - Jquery插件私有(private)数据和$(this)

javascript - jQuery 循环插件 : Why the pager doesn't show the exact number of images in this official demo?

javascript - Jquery Cycle + Firefox 压缩图像

javascript - 制作此产品 slider 时遇到问题

javascript - CSS flex 一个内容适合的图像,其标题同级的高度未知

php - 如何正确放置我的字幕?