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

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

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

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

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

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

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

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

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

.postmeta {
	font-size: 11px;
	padding: 2px 4px;
	font-family: Arial, Verdana;
	}

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

.postmeta {
	font-size: 11px;
	padding: 2px 4px;
	font-family: Arial, Verdana;
	display: block;
    clear: both;
	}

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

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

.more-link
{
display: block;
clear: both;
}

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

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

• Публикации автора
• Рекомендую к прочтению
• Задать вопрос автору

Автор - Александр

Меня зовут Александр.
Я Вебмастер и SEO — специалист по созданию и продвижению сайтов на WordPress.
В профессиональном интернет-маркетинге c 2007 года. Основные направления: создание и продвижение web-проектов в российском сегменте интернет. Специализация: создание сайтов и их комплексное продвижение, внутренняя оптимизация, внешняя оптимизация, трафиковое продвижение, контентное продвижение...

Связаться со мной >>

• Установка WordPress на хостинг - 11.05.2017
• Хостинг для WordPress - 26.04.2017
• 7 советов как ускорить WordPress - 18.01.2017
• WordPress плагины вывода популярных постов - 25.07.2016
• Готовим ваш сайт для мобильных устройств? - 29.06.2016

Посмотреть все публикации

Как преодолеть технические сложности

Javascript + jQuery для начинающих

Профессиональный сайт за один день.

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение (обязательно)

"Поставьте галочку, если вы не робот"

и решите пример 8-5= ответ буквами

Δ