Обтекание картинки текстом

Как сделать обтекание картинки текстом правильно?

Обтекание картинки текстомСегодняшняя статья будет посвящена вопросу обтекания картинки текстом. Сразу скажу что это только один из множества вариантов решения проблем с обтеканием картинки текстом. Буквально на днях я получил вопрос от своего клиента о том, что он не знает как заставить текст правильно обтекать картинку. Однако как выяснилось, нужно было наоборот запретить обтекание текстом картинки. 🙂

Суть вопроса такова, что иногда мы пишем очень короткий пост, и при выводе на главной странице блога, анонса нашего поста с миниатюрой, возникает проблема с обтеканием картинки текстом. А именно, ссылка «читать далее» съежат вверх, и это только полбеды, потому что съехать вверх может и что-нибудь еще. Например, блок с рубриками или комментариями. Вот как здесь:

Обтекание картинки текстом

 

Для того чтоб текст правильно обтекал картинку, а вернее ссылка «читать далее» или как в нашем случае блок с рубрикой всегда находились под картинкой, не зависимо от количества текста мы просто добавим в наш файл стилей одно правило.

Куда будем добавлять?

Первое что нужно сделать, это определить, какое правило отвечает за оформление нашего блока с рубрикой. В Хроме это легко сделать, выделите слова «Опубликовано в рубрике», нажмите правую кнопку мыши и кликните «Просмотр кода элемента». В моем случае оказалось, что за это отвечает правило .postmeta

Теперь находим это правило в файле стилей нашей текущей темы и добавляем в него две строчки.

Вот что у нас было:

 

 

А вот что стало:

 

 

После применения нового правила обтекание картинки текстом стало правильным т. е. таким аким мы и хотели, и теперь блок с рубриками всегда будет под картинкой:

Обтекание картинки текстом

По аналогии можно сделать, что и ссылка «читать далее» также всегда будет располагаться под картинкой, применив этот способ к стилю, отвечающему за ее оформление. Как правило, эта ссылка имеет класс «more-lnk» и добавление в файл стилей следующего кода исправляет эту ошибку.

 

 

Вот так все просто.

Удачи вам и процветания!

Похожие записи

Рейтинг: 0

Автор публикации

не в сети 5 месяцев

Александр

24

Ничего так в делах не подкупает, как своевременная предоплата. $

Комментарии: 146Публикации: 102Регистрация: 05-02-2016

3 комментария

  • Виталий

    Здорово! Многому еще предстоит научиться! Спасибо Александр!

    Рейтинг: 0
  • Lara

    Замечательная статья.! До прочтения Вашей статьи я и не задумывалась над тем, где расположены рубрики — рядом с картинкой или после нее… Прочитала, зашла на свой сайт и вижу: действительно, рядом с картинкой не красиво (у меня расположены в этом месте Метки). Все быстренько поправила благодаря вашей статье (заняло всего минут 15). Все супер, а «Читать полностью» решила пока оставить, как есть. Спасибо за статью! Успехов Вам!

    Рейтинг: 0
  • Лара, согласен с вами, ссылку «Читать полностью» можно оставить, я тоже оставил.

    Рейтинг: 0

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