Question

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

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

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

我如何实现目标，最好只使用CSS？

修改：JSFiddle

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

Answer 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;
}

Updated fiddle

Answer 2

我没有看到你的代码所以我无法给出确切的解决方案。以下是我的解决方案，希望它对您有用。

CSS：

#animation{
   width: 100%;
   clear: both;
}
#content{
   width: 100%;
   clear: both;
}

HTML

如果您使用左侧浮动图像。然后你应该在img标签的末尾使用br标签。

<br style="clear:both;">

将内容div定位在img下面只有div

2 个答案: