Почему мой DIV меньше его содержимого? - PullRequest
Новая
       9

Почему мой DIV меньше его содержимого?

2 голосов
/ 03 апреля 2009

Я пытаюсь изменить Простое jQuery Slideshow , опубликованное Джонатаном Раашем.

Цикл всех изображений, исчезающих от одного к следующему.

Квадратное изображение 350px в контейнере DIV высотой 350px http://img154.imageshack.us/img154/904/fixed.jpg

Его пример работает с изображениями фиксированного размера. Вместо этого я хочу, чтобы он работал с изображениями, размер которых в процентах от ширины окна браузера.

Работает с изображениями фиксированного размера ... 

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

#slideshow img {
    ...
}

Вот как я это изменил ... 

#slideshow {
    ...
}

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

Поскольку я больше не устанавливаю явную высоту "слайд-шоу" DIV, оно падает до 0. И изображение затем закрывает мой текст. Сравнить ...

Изображение шириной 50% в DIV-контейнере нулевой высоты (перекрывается с текстом) 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 соответствовала высоте его содержимого?

Ответы [ 2 ]

8 голосов
/ 03 апреля 2009

Устанавливая абсолютную позицию изображения, вы удаляете его из потока документа (где находится остальной текст) и кладете его сверху.

Отредактировано

Я настроил 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;
        }

Возможно, это больше похоже на то, что вы хотите. Вам нужно будет придумать нормальную высоту, которая соответствует большей части вашего контента, но это, казалось, затухало и снимало картинки с минимумом «всплывающих окон», когда они достигли конца своего цикла.

1 голос
/ 03 апреля 2009

Абсолютное позиционирование - это причина, по которой изображения располагаются над текстом (поскольку ничто не дает #slideshow <div> любой высоты), но вашей системе необходимо, чтобы изображения были расположены абсолютно точно, чтобы расположить их друг над другом для эффект слайд-шоу. Так как вы все равно используете jQuery, вы можете программно расширить контейнер <div> до высоты самого большого изображения. 

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

Я уверен, что кто-то может указать более элегантный способ написания части скрипта maxHeight!

...