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

В общем такая ситуация (упрощенно):
<img style="float: left">
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

И получаем вот такой результат
806c1e50c89048a0af5282c4bf571951.png
Как сделать, чтобы второй (в данном случае) абзац весь был на одном уровне?
  • Вопрос задан
  • 2401 просмотр
Пригласить эксперта
Ответы на вопрос 3
<img style="float: right">
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы