@hoindex

Как спозиционировать изображения справа от заголовка?

Всем доброго дня.

Столкнулся с проблемой.
На странице выводятся статьи, у статей есть заголовки (H2).
У некоторых статей справа от заголовка выводить значок new.
Всё бы ничего, но т.к. сайт адаптивный, в определенный момент заголовок начинает занимать 2 строки и значок в этом случае всё ломается.
По задумке он должен перемещаться на вторую строку и быть в конце последнего слова в заголовке.

Картинку вывожу через css background.

Пробовал различные варианты конструкций блоков, не могу добиться нужного результата...
Для наглядности набросок:
prntscr.com/fpxj42

Есть конечно одна идея, убрать все css "навороты" у H2 (сделать как простой текст) и пустить в конце картинку обычным img, но может есть способ элегантнее?
  • Вопрос задан
  • 1289 просмотров
Решения вопроса 2
@Afadeev
Front-end разработчик
Я бы вообще отказался от картинки и добавил в заголовок спан <h2>Заголовок<span class="new">NEW</span></h2> и стилями сделал ее на вид как картинку.
Ответ написан
@hoindex Автор вопроса
Товарищи, спасибо всем за помощь!
Перепробовал все варианты, в принципе всё заработало ПОЧТИ как нужно, за одним исключением.
В какие-то моменты при масштабировании, когда ширины контейнера для вывода заголовка + значка перестает хватать, значок переносится на следующую строку...

Получается вот такая штука - prntscr.com/fpzz99

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

UPD: Решил проблему при помощи PHP и span, обрамляю последнее слово в заголовке+span с картинкой в <nobr>.
Получается span с картинкой всегда на одной строке.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
djQuery
@djQuery
"Кодируем помаленьку" ("Сказка о Тройке")))
Выводите картинку не как background-image, а как обычное изображение. Попробуйте картинке дать стили:
<img style='display:inline-block; float:left;'>
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы