为什么我的 DIV 比它的内容小？

Question

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

它会循环遍历所有从一个到下一个淡出的图像。

350px square image in a 350px height DIV container http://img154.imageshack.us/img154/904/fixed.jpg

他的示例适用于固定大小的图像。我希望它可以处理大小为浏览器窗口宽度百分比的图像。

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

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

#slideshow img {
    ...
}

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

#slideshow {
    ...
}

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

因为我不再明确设置 DIV“幻灯片”的高度，它会折叠为 0。然后图像会覆盖我的文本。比较...

50% wide image in a zero height DIV container (overlaps text) http://img253.imageshack.us/img253/6016/variable.jpg

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en">
    <head>
        <title></title>
        <style type="text/css">

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

            #slideshow img {
                position:absolute;
                top:0;
                left:0;
                z-index:8;
            }

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

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

        </style>
        <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            function slideSwitch() {
                var $active = $('#slideshow img.active');
                if ( $active.length == 0 ) $active = $('#slideshow img:last');
                var $next =  $active.next().length ? $active.next()
                    : $('#slideshow img:first');
                $active.addClass('last-active');
                $next.css({opacity: 0.0})
                    .addClass('active')
                    .animate({opacity: 1.0}, 1000, function() {
                        $active.removeClass('active last-active');
                    });
            }

            $(function() {
                setInterval( "slideSwitch()", 5000 );
            });

        </script>
    </head>
    <body>

        <div id="slideshow">
            <img src="img/img1.jpg" alt="" class="active" />
            <img src="img/img2.jpg" alt="" />
            <img src="img/img3.jpg" alt="" />
        </div>

        <p>Lorem ipsum ...</p>

    </body>
</html>

为什么我的 DIV 比它的内容小？如何使我的 DIV 高度匹配其内容的高度？

Answer 1

通过将图像的位置设置为绝对位置，您可以将其从文档流（其余文本所在的位置）中移除并将其放在顶部。

已编辑：

我将 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;
        }

也许这更像你想要的。您需要想出一个与大部分内容相匹配的合理高度，但这似乎会使图片在循环结束时淡入淡出，并且“弹出”最少。

Answer 2

绝对定位是图像在文本上方的原因（因为没有任何东西可以给 #slideshow <div> 任何高度），但是您的系统需要绝对定位图像以便将它们堆叠在一起以便幻灯片效果。由于您无论如何都在使用 jQuery，因此您可以通过编程方式将容器 <div> 扩展到最大图像的高度。

var maxHeight = 0;
$("#slideshow img").each(function(){
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
});
$("#slideshow").height(maxHeight);

我相信有人可以指出一种更优雅的方式来编写脚本的 maxHeight 部分！