0

在我处理的页面中，我有一个 div，其中包含一个带有更改图像（使用 CSS）的动画，下面是内容的包装 div，如下所示：

<div id="animation">
     <img ...>
     ...
     <img ...>
</div>
<div id="content">
     Some content
</div>

我尝试了不同的方法：浮动、清除、定位，但我无法让内容 div 停留在它应该在动画 div 下方的位置 - 它与它重叠。我发现部分工作的唯一解决方案是给第一个 div 图像的高度（它们都具有相同的宽度和高度），但是当我这样做时，它会在不同的分辨率下中断，或者给图像高度 100% 和应用上述方法，但图像在不同分辨率下看起来非常难看。

我怎样才能实现我的目标，最好只使用 CSS？

编辑：JSFiddle

编辑 2：我使用本教程来更改图像。

4

1 回答 1

1

问题是您将顶部 div 中的所有内容都设置为position:absolute. 这样，顶部 div 不知道它需要多高（即它将是 0px 高）。
所以解决方案是不定位一个img；那么 div 和这个 img 一样高，内容 div 会向下移动到它下面。

#cf4a img {
    position: absolute;
    left:0; top:0;
    width: 100%;
}

#cf4a img:first-child { /* one non-positioned child */
    position: static;
}

更新的小提琴

于 2013-07-05T12:25:40.197 回答