Как сделать красивое выравнивание абзацев при наличии элемента слева?

Question

[Александр]

В общем такая ситуация (упрощенно):

<img style="float: left">
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

И получаем вот такой результат

Как сделать, чтобы второй (в данном случае) абзац весь был на одном уровне?

Comments

[Lynn «Кофеман»]

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

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

[Александр]

В этом и проблема. Пока наиболее оптимальным видится такой "костыль": при малом размере текста выводить его весь с отступом по ширине картинки, при большом - первый абзац справа от картинки, а дальше вставлять clear:both и остальной текст уже будет под картинкой.

Answer 1

[Devellop]

margin-bottom

Comments

[Александр]

Я знаю об этой фиче. Дело в том, что абзацев может быть произвольное количество и они могут быть произвольного размера. Так что интересует более универсальное решение.

Answer 2

[Андрей Голуменов]

<img style="float: right">
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

Переместите картинку вправо. Не будет подвисших абзацев, текст будет обтекать картинку и не так бросаться в глаза

Answer 3

[Юрий Лобанов]

К сожалению браузеры не умеют убирать висячие строки. Так что универсального решения Вы не найдете. Либо все переверстывать вручную, используя таблицы, выравнивания, margin и т. д., либо попробовать написать js скрипт (или поискать готовый), который справится с этими строками.
Алгоритм видится следующий: функция берет абзацы, последовательно считает высоту, складывая. Если Высоты превышает высоту обтекаемого объекта, то дальше уже эта сумма сравнивается с высотой обтекаемого объекта, разница делится на высоту строк. Если получается больше 2, или 0 при округлении, то проблемы нет, если 1, то значит есть висячая строка и абзацу/абзацам лучше задать постоянную ширину, ну или попробовать висячую строку в спан и relative'ом пододвинуть.
Хотя возможно это велосипед.

Comments

[Александр]

Ну в общем я понял уже, что простого и оптимального решения тут нет. В другой ветке я уже указывал свой вариант "костыля" //toster.ru/q/116897#clarification_268411

[Юрий Лобанов]

@aspetek при наличии функции на js можно решить и при ресайзе окна. Но в общем да, простого решения нет. За этим и в программах верстки для печати надо постоянно следить, а уж html/css до нормальной типографики еще пилить и пилить.