Question

我有一个简单的标记：

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

jsFiddle

为什么heck是父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 cycle。因此position: absolute是必需的，并由插件自动添加。

Answer 1

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

Answer 2

真正的问题是，你的Cycle幻灯片正在折叠，因为每个幻灯片（标记中的图片）都设置了position: absolute。

这是必要的，因为Cycle使用定位（以及其他CSS）来过渡幻灯片。要解决此问题，请查看在容器上设置固定高度（如果您的站点是固定宽度，则只有一个选项）。周期2有auto-height option，其中：

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


可以提供一个整数来标识哨兵幻灯片的从零开始的幻灯片索引

可以提供字符串“calc”来指示Cycle2计算最高的幻灯片并将其用作哨兵

可以提供比率字符串，用于标识容器的宽度：高度纵横比


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

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

父div没有扩展到高度

2 个答案: