Как автоматически выравнивать высоту блока содержащего плавающие элементы


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

Предположим, что у вас есть блок wrapperвнутри которого располагаются два блока со свойствами float:left.

<div id="wrapper"><!-- auto height --> <div id="col1"></div><!-- floating --> <div id="col2"></div><!-- floating --> </div> 

Неравная высота блоков

Есть три необычных и простых решения этой проблемы.

Решение 1

Не самое быстрое и элегантное решение, но самое простое. Чтобы блок, содержащий плавающие элементы автоматически изменял высоту, в соответствии с высотой внутренних блоков, просто добавьте абзац с текстом или пустой после этих блоков. Можно даже добавить пробел например <p>&nbsp;</p>

<div id="wrapper"><!-- auto height --> <div id="col1"></div><!-- floating --> <div id="col2"></div><!-- floating --> <p>просто текст</p> </div> 

Как автоматически выравнивать высоту блока

Решение 2

Добавьте также после плавающих блоков еще один элемент <div>или даже <br>, и назначьте ему класс очищающий свойство float

<div id="wrapper"><!-- auto height --> <div id="col1"></div><!-- floating --> <div id="col2"></div><!-- floating --> <div style="clear:both;"></div> </div> 

 

Как автоматически выравнивать высоту блока

Этот метод работает и является, пожалуй, самым используемым приемом при выравнивании высоты блока.

Решение 3

Очищаем свойство floatна последнем плавающем блоке, используя правило в стилях для этого блока overflow: auto

#col2{ display:block; /*float:left; убираем это свойство */ overflow:auto; } 

 

Вот такие простые, но полезные надеюсь для начинающих подсказки. Если у вас есть тоже интересное решение, поделитесь со всеми в комментариях.

 

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Добавить коментарий

14 + 16 =