0

我有一个简单的标记：

<div style="position: relative;">
    <img src="http://placehold.it/350x150" style="position: absolute;">
</div>
<img src="http://placehold.it/350x150">

jsFiddle

为什么父 div 没有扩大高度？

编辑：

最终的标记是这样的：

<div style="position: relative;">
    <img src="http://placehold.it/350x150" style="position: absolute;">
    <img src="http://placehold.it/350x150" style="position: absolute; display: none;">
    <img src="http://placehold.it/350x150" style="position: absolute; display: none;">
</div>

我正在使用jquery 循环。所以position: absolute是必要的，并由插件自动添加。

4

2 回答 2

5

因为你在position: absolute;那里。将其更改为position: static;或类似。为什么要在那里使用绝对定位？

于 2013-08-27T10:24:02.757 回答
1

看来，真正的问题是您的 Cycle 幻灯片正在折叠，因为每张幻灯片（标记中的图像）都已position: absolute设置。

这是必要的，因为 Cycle 使用定位（以及其他 CSS）来转换幻灯片。要解决这个问题，请查看在容器上设置固定高度（如果您的站点是固定宽度，则只有一个选项）。Cycle 2 有一个自动高度选项，它：

...确定 Cycle2 是否将为幻灯片提供高度管理，这在流体或响应式设计中非常有用。可以通过三种方式使用此选项：

  • 可以提供一个整数来标识标记幻灯片的从零开始的幻灯片索引
  • 可以提供字符串“calc”来指示 Cycle2 计算最高的幻灯片并将其用作标记
  • 可以提供一个比率字符串，用于标识容器的宽度：高度纵横比

默认情况下，幻灯片的第一张幻灯片用作标记幻灯片，如果容器没有通过 CSS 设置特定高度，则它的 demensions 将控制幻灯片容器的高度。

一些建议：使用 Cycle 2（而不是原始的 Cycle 插件），它有你需要的内置功能。还可以查看非常好的API 文档。

于 2013-08-27T10:33:57.377 回答