Question

如何设置此页面的样式，以便包含幻灯片的div的高度是幻灯片中图像的高度？

<html>
<style>
  img {width:100%;}
</style>

  <h1>Screenshots</h1>
  <div id="slide" style="position: relative;">
    <img src="https://multibit.org/images/en/screenshots/help-contents.png"  >
    <img src="https://multibit.org/images/en/screenshots/send.png"  >
  </div>
  <h1>Hidden text - how can I see it? This text is hidden under the slide show. </h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://multibit.org/jquery/plugins/cycle/jquery.cycle.lite.js"></script>
<script>
  $(function() {
    $('#slide').cycle({
      delay:   -1000, 
    });
  });
</script>
</html>

enter image description here

目前div的高度似乎为零，因此下面的文字隐藏在幻灯片下方。谢谢！

Answer 1

<强>解释：

由于图像内部的图像绝对定位，幻灯片的高度会折叠，即它的高度会折叠为零。

您可以通过在父div上设置最小高度来解决此问题：

#slide { min-height:352px; }

这是 working FIDDLE

jQuery cycle.lite插件 - 如何让包含div的响应高度？

1 个答案: