Сделать элемент блока с относительной позицией того же размера, что и содержащийся в нем элемент с абсолютной позицией

Question

Хорошо, я пытаюсь взять несколько элементов div и все их содержимое, расположить их друг над другом и заставить появившийся div (#stack) появляться в обычном потоке вещей следующим способом:

CSS:

#stack
{
    position:relative;
    display:block;
}
#stack div
{
    position:absolute;
    left:0;
}

HTML:

<div id="stack">
    <div>
        <img src="images/1.jpg">
        <p>
            First Image
        </p>
    </div>
    <div>
        <img src="images/2.jpg">
        <p>
            Second Image
        </p>
    </div>
    <div>
        <img src="images/3.jpg">
        <p>
            Third Image
        </p>
    </div>
    <div>
        <img src="images/4.jpg">
        <p>
            Fourth Image
        </p>
    </div>
</div>

Что работает, за исключением того, что теперь div # stack имеет ширину / высоту 0. Я бы хотел, чтобы он был того же размера, что и его самый большой дочерний элемент.

Заранее спасибо за помощь!

Answer 1

Поскольку вы извлекаете внутренние делители из потока документа с помощью position: absolute;, внешний делитель ни в коем случае не может растягиваться до размеров самого большого дочернего элемента. Вы должны использовать JavaScript для достижения этого эффекта. Если вы знакомы с jQuery, вы можете использовать что-то вроде этого:

var w = false, h = false;

$('#stack div').each(function() {
    w = $(this).width() > w || !w ? $(this).width() : w;
    h = $(this).height() > h || !h ? $(this).height() : h;
});

$('#stack').css({
    width: w,
    height: h
});

Answer 2

Вы хотите, чтобы ширина #stack также сжимала его дочерних элементов, или вы просто беспокоитесь о его высоте? Я предполагаю последнее, поскольку вы явно указали display: block.

Потому что в этом случае это можно сделать только с помощью CSS:

#stack {
    overflow: hidden;
    _zoom: 1;
}       
#stack div {
    float: left;
    margin-right: -100%;
}

Я добавил _zoom: 1 для запуска hasLayout в IE6. Вы можете изменить это на предпочитаемый вами метод (например, в отдельной таблице стилей IE6) или вообще не указывать его, если вам не нужна поддержка IE6.

В Opera вы можете сделать #stack термоусадочную пленку для его дочерних элементов целиком (т.е. по ширине), когда вы перемещаете стек (или display: inline-block) и добавляете width: 100% в дочерние элементы div. Я не знаю, связано ли это с ошибкой в ​​Opera, ошибкой в ​​других браузерах или просто с различием из-за неопределенной спецификации.

Answer 3

Положение установки: absolute выводит узел из потока, поэтому родительский объект, не имеющий потокового содержимого, получает измерения 0x0.

Если ваш серверный код (например, PHP) знает об этих изображениях, вы можете рассчитать максимальную ширину и максимальную высоту между ними и соответствующим образом установить высоту / ширину родительского элемента.

Или, как говорит Тату, вы можете использовать JavaScript и делать это на стороне клиента.