为什么我的DIV小于其内容？

我正在尝试修改Jonathan Raasch发布的Simple jQuery Slideshow.

它循环遍历从每个图像逐渐衰落到下一个图像的所有图像.

350px高度DIV容器中的350px方形图像http://img154.imageshack.us/img154/904/fixed.jpg

他的例子适用于固定大小的图像.我希望它能够处理大小为浏览器窗口宽度百分比的图像.

这适用于固定大小的图像......

#slideshow {
    ...
    height:350px;
}

#slideshow img {
    ...
}

这就是我改变它的方式......

#slideshow {
    ...
}

#slideshow img {
    ...
    width: 50%;
}

Becasue我不再明确地设置DIV"幻灯片"的高度,它会折叠为0.然后图像会覆盖我的文本.相比...

零高度DIV容器中的50%宽图像(重叠文本)http://img253.imageshack.us/img253/6016/variable.jpg

这是我的整个HTML文件,包括CSS和JavaScript ......

    
        
        
        
        
    
    

        

            
            
            
        

        
Lorem ipsum ...

    

为什么我的DIV小于其内容？如何使DIV高度与其内容的高度相匹配？

通过将图像的位置设置为绝对,您可以将其从文档流(文本的其余部分)中删除并将其放在顶部.

编辑:

我将CSS调整为:

        #slideshow {
            position:relative;
            height:1000px;
        }

        #slideshow img {
            position:absolute;
            width: 50%;
            top:0;
            left:0;
            z-index:8;
            display: none;
        }

        #slideshow img.active {
            z-index:10;
            display: inline;
        }

        #slideshow img.last-active {
            z-index:9;
            display: inline;
        }

也许这更像你想要的.你需要提出一个与你的大部分内容相匹配的理智高度,但是当它们到达周期结束时,这似乎会使图片最小化"砰砰"地淡入淡出.