0

这已经让我发疯了一段时间——我想将jQuery Cycle Lite 插件与简单的液体布局结合起来。

我的问题是幻灯片下方的内容在其下方消失了——当幻灯片 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();
});
4

2 回答 2

1

我已经使用下面的 jQuery 解决了这个问题，该 jQuery 会检查加载时的最高图像，并在#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');
  });
});
于 2011-02-25T14:11:38.197 回答
0 
body {
overflow:  auto;
min-height: 100%;
}
于 2011-02-25T12:40:56.023 回答