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

Question

У меня есть 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>
.....

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

Спасибо

Answer 1

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

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

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>

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

Answer 2

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

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

Answer 3

У меня была такая же проблема. Я получил элемент обертки, чтобы обернуть содержимое, установив отображение элемента обертки в «таблицу». Так что для вашей ситуации попробуйте

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

Answer 4

Добавьте это в свой файл 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" к вашему block div, чтобы очистить поплавок:

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

Answer 5

У меня есть тег 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%;">