Установите div высоту его содержимого с помощью позиции: absolute

Question

я пытаюсь выполнить следующее:

<div>
    <div class="img"><img src=""></div>
    <div class="img"><img src=""></div>
    <div class="img"><img src=""></div>
</div>    

элементы div, содержащие изображения, будут использоваться в слайд-шоу, поэтому их нужно расположить друг над другом, с первымпоказывая, а остальные скрыты.

Когда я устанавливаю положение: абсолютное относительно div, высота внешнего div уменьшается и разрушает весь макет.Любые советы, как это исправить?

РЕДАКТИРОВАТЬ: структура HTML не подлежит обсуждению.

Answer 1

Закончилась установка высоты div с помощью JQuery в соответствии с его содержимым. Просто нужно было добавить одну строку кода в цикл. Дело закрыто.

Answer 2

Я думаю, что ваш подход неправильный, способ сделать это - не размещать элементы div друг на друге с абсолютным позиционированием. Установите css на двух последних div для отображения: none. Если вы хотите перейти к следующему изображению, установите изображение как display: block. (показанный пример использует JQuery)

$("div#image2").show();

, а затем скрыть два других

$("div#image2").siblings().hide();

Вам нужно будет добавить атрибут id, чтобы вы могли уникальным образом выбирать свои изображения.