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

Question

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

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

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

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

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

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

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

#slideshow img {
    ...
}

Run Code Online (Sandbox Code Playgroud)

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

#slideshow {
    ...
}

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

Run Code Online (Sandbox Code Playgroud)

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

零高度DIV容器中的50%宽图像(重叠文本)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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Bon*_*nka 8

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

编辑:

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	16 年，9 月前
查看次数：	6997 次
最近记录：	16 年，9 月前