Расстянуть div по содержимому. (С котиками)

На самом деле заголовок не в полной мере соответствует статье.
Однако так, как подобная потребность возникает в основном, при использовании выравниваний по краю (float), то и решение лежит в этой же области, а не в «растягивании» дива. Но пока не знаешь ответ, кажется, что решение заключается все же в растягивании.

Иногда я пишу на блог решения некоторых проблем, чтобы самому же потом находить их через поиск.

Я долго парился с проблемой, что когда делаю обтекание картинки текстом и текст кончается раньше чем картинка, то следующий код продолжается не от картинки, а от текста.

Вот например:

Слева картинка. А это обтекающий текст.
Теперь добавим еще контент:

Вот. Левая картинка и текст находятся в одном диве. По логике картинка должна его растянуть, как его растягивает текст, но этого не происходит.
Я сразу отмел классические таблицы и пробовал самыми разными способами извращаться с дивами. В итоге в первый раз остановился на параметре «min-height» задав его в диве по высоте первой картинки +20px на расстояние.

Вот так:

Ничего, что страница три метра весит?

Разок это прокатило.
Но потом я наткнулся на шаблон для нового сайта, и его надо было допиливать. И там вновь встала эта проблема. Фиксировать высоту тут уже не получится и я наконец смог, блин, найти решение.
Решение оказалось очень простым. В дивах просто есть параметр отменяющий обтекание!

если после отекания вставить код 

<div style="clear: both;"></div>

, то он наконец работает, как надо.
  Ой нет, уже пять мегабайт )).

Надеюсь кому-то кроме меня еще пригодится.
Так же нашел на хабре пару полезных статей про float и clear
habrahabr.ru/post/136588/
habrahabr.ru/post/136622/

Автор: Elsper.ru


VN:F [1.9.14_1148]
Rating: 10.0/10 (1 vote cast)
Расстянуть div по содержимому. (С котиками), 10.0 out of 10 based on 1 rating

One thought on “Расстянуть div по содержимому. (С котиками)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Спoнcopcкиe ссылки