Question

我正在使用cycle.js创建旋转横幅。该循环在横幅链接上使用position:absolute。

问题是，包含div现在的高度为零，因此下面的内容重叠并隐藏。

如何让div slideshow有高度？需要有反应，所以不能达到设定的高度。

<div id="feature">
   <div class="slideshow" style="position: relative;">
        <a href="/guarantees.aspx" style="position: absolute; top: 0px; left: 0px; 
              display: none; z-index: 2; opacity: 0; width: 682px; height: 258px;">
           <img alt="" src="/images/mobile/banner1.jpg">
        </a>
        <a href="/fencing.aspx" style="position: absolute; top: 0px; left: 0px; 
            display: block; z-index: 3; opacity: 1; width: 682px; height: 259px;">
           <img alt="" src="/images/mobile/banner2.jpg">
        </a>
   </div>
   <div id="pageNav">
        <a href="#" class="">&nbsp;</a>
        <a href="#" class="activeSlide">&nbsp;</a>
   </div>
</div>

Answer 1

我想您唯一的选择是将事件处理程序绑定到ready和resize，以便通过检测height来通过Javascript设置.slideshow window如果您愿意，可以使用宽度（或使用当前图像height; Cycle提供pretty complete API，您可以通过该Cycle 2绑定回调函数以更改图像以设置新高度。

由于您使用Javascript来处理当前图像尺寸，因此这不应该成为一个问题。

在任何情况下，也许您应该考虑使用另一个滑块插件（或编写您自己的函数），通过不使用position: absolute来满足您的需求。周期很老，可能不是用响应式思维模式构建的（我知道同一个开发人员正在使用更现代的方法处理{{3}}）。

Div包含绝对定位元素因此没有高度

1 个答案: