简体繁体 English

浮动元素中的绝对定位元素

[英]Absolute positioned elements inside a float

原文 2012-04-02 08:14:46 5 1 javascript/ html/ css/ css-float/ css-position

I have a stack of imgs overlaying one-another which are shown/hidden as needed. 我有一堆重叠的img，可以根据需要显示/隐藏。 For these images to overlap I am forced to use position:absolute(I am fading between them so I need at least two images on-top of one-another at a time). 为了使这些图像重叠，我被迫使用position：absolute（我在它们之间逐渐褪色，因此一次至少要在一个图像的上面放置两个图像）。 Their container div is floated, but the images' height varies so I cannot set a fixed height on this parent container. 它们的容器div是浮动的，但是图像的高度各不相同，因此我无法在此父容器上设置固定高度。 I need their container to accurately reflect their height as there is another floated div that clears the container which needs to sit below the image, whatever height it is. 我需要它们的容器准确地反映它们的高度，因为还有另一个浮动div可以清除需要放置在图像下方的容器，而不论其高度是多少。

Is there any way of achieving this without using javascript to adjust the height of the container appropriately for each image? 没有使用javascript来针对每个图像适当调整容器的高度，有没有办法实现这一目标？

Here is a link to the page as it is at the moment. 这是当前页面的链接。 I am using images with identical heights but I would like to be able to vary the height of the images. 我正在使用具有相同高度的图像，但是我希望能够改变图像的高度。

http://www.unwalked.com/ http://www.unwalked.com/

1 个解决方案

What if you don't make all the child images absolutely positioned, instead only temporarily set position: absolute; 如果您不将所有子图像都绝对定位，而只是暂时设置position: absolute; ，该怎么办position: absolute; to the image that's being faded away? 消失的图像？ That way the container would naturally resize to fit active image. 这样，容器自然会调整大小以适合活动图像。