结合 jQuery Cycle (Lite) 和液体布局

发布于 2024-10-19 03:06:52 字数 2342 浏览 9 评论 0原文

这已经让我抓狂了一段时间了 – 我想结合 jQuery Cycle Lite 插件采用简单的液体布局。

我的问题是幻灯片下面的内容消失了 - 当幻灯片 JS 处于活动状态时，包含幻灯片的 div 的高度似乎为 0px。如果我删除幻灯片代码（并且只使用静态图像），则 div 会被其中的图像推到正确的高度。

由于幻灯片本身随液体布局缩放，我无法指定幻灯片的 px 高度。谁能建议一个解决方法？

代码如下，但查看我在 http://jsbin.com/ 上使用的示例可能会有所帮助ubufi5/编辑。

感谢您的阅读！

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();
});

原文

This has been driving me nuts for a while now – I want to combine the jQuery Cycle Lite plugin with a simple liquid layout.

My problem is that the content below the slideshow disappears underneath it – when the slideshow JS is active, it seems the div that contains the slideshow has a height of 0px. If I remove the slideshow code (and just use a still image instead) the div is pushed to the correct height by the image inside it.

As the slideshow itself scales with the liquid layout, I can't specify a px height for the slideshow. Can anyone suggest a workaround?

Code is below, but it might help to view the example I've been working with at http://jsbin.com/ubufi5/edit.

Thanks for reading!

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();
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

べ映画 2024-10-26 03:06:52

我已经使用下面的 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');
  });
});

I've solved this using the below jQuery which checks for the tallest image on load and maintains the height of the #slidebox div accordingly when the window is resized (example here), but I'm going to leave this question open for a while in the hope that there's some gobsmackingly basic CSS thing I've somehow overlooked, or at least an explanation as to why I'm encountering this issue.

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');
  });
});

回复收藏 0 原文

早茶月光 2024-10-26 03:06:52

body {
overflow:  auto;
min-height: 100%;
}

body {
overflow:  auto;
min-height: 100%;
}

回复收藏 0 原文

~没有更多了~

关于作者

柠栀

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

结合 jQuery Cycle (Lite) 和液体布局

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

结合 jQuery Cycle (Lite) 和液体布局

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。