Как сделать div расширяться вертикально, чтобы обернуть содержимое внутри него?

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

Это оболочка div:

.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }

Это разметка, динамически генерируемая для (одного из) изображений:

<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div>
.....

Как мне получить div block для продолжения с изображениями?

Спасибо

Ответ 1

Проблема, которую вы наблюдаете, происходит, когда вы плаваете элемент, который выводит его из нормального потока элементов (по нормальному потоку я имею в виду способ отображения элементов без стилизации). Когда вы плаваете элемент, другие элементы, все еще находящиеся в нормальном потоке, просто игнорируют его и не освобождают место для него, поэтому ваш div block не расширяет всю высоту вашего изображения.

Существует несколько различных решений:

1) Добавьте правило overflow: hidden; в класс block:

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }

2) Добавьте элемент после вашего изображения, который очищает плавающий:

<div class="block">
    <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div>
    <div style="clear: both;"></div>
</div>

Оба будут работать, но я предпочитаю первое решение.

Ответ 2

УДАЛИТЬ float:left из стиля изображения и height:Auto из стиля блока

ADD display:inline-block; в стиле блока (стиль контейнера)

Ответ 3

Добавьте это в свой файл CSS:

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;}
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */

И добавьте класс "group" в ваш div block, чтобы поплавок был очищен:

<div class="block group">
...

Ответ 4

У меня есть тег div, который расширяется (по горизонтали и по вертикали) в зависимости от того, что у меня есть. У меня есть:

<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right">

Я также помещаю в него таблицу для хранения всей моей информации:

<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;">