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

I'm trying to modify the Simple jQuery Slideshow published by Jonathan Raasch.

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

It cycles through all images fading from each to the next.

它循环遍历从每个图像逐渐消失的所有图像。

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

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

His example works with fixed-size images. I want it to instead work with images sized to a percentage width of the browser window.

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

This works with fixed-size images...

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

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

#slideshow img {
    ...
}

This is how I changed it...

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

#slideshow {
    ...
}

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

Becasue I'm no longer explicitly setting the height of the DIV "slideshow", it collapses to 0. And the image then covers up my text. Compare...

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

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

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

This is my whole HTML file including CSS and JavaScript...

这是我的整个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>

Why is my DIV smaller than its contents? How can I make my DIV height match the height of its contents?

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

2 个解决方案

#1

The absolute positioning is the reason the images are over the text (since nothing is giving the #slideshow <div> any height), but your system needs the images to be absolutely positioned in order to stack them on top of each other for the slideshow effect. Since you are using jQuery anyway, you can programmatically expand the container <div> to the height of the largest image.

绝对定位是图像在文本上的原因(因为没有任何东西给#slideshow

任何高度),但是你的系统需要绝对定位图像以便将它们叠加在一起以进行幻灯片放映影响。由于您仍在使用jQuery,因此可以通过编程方式将容器扩展到最大图像的高度。

2 个解决方案

#1

更多相关文章

随机推荐