Текст не обтекает картинки - есть решение!

Текст не обтекает картинки — есть решение!

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

Необтекание картинки текстом — очень распространенная проблема при создании записей на блоге. Это происходит из-за того, что в основном файле оформления вашей темы под названием style.css отсутствует часть параметров, которые отвечают за обтекание картинок текстом. Визуальный редактор WordPress имеет свой собственный .css-файл с настройками, который никак не связан с темой, поэтому при просмотре результата через него все отображается правильно.

Итак, чтобы «научить» вашу тему правильно обрабатывать параметры, заданные через визуальный редактор, и отображать обтекание картинки текстом, нам необходимо добавить недостающий код в style.css:

.alignleft {
float:left;
margin-right:10px;
}
.alignright {
float: right;
margin-left:10px;
}

.alignleft – название класса для картинок, которые находятся слева от текста, соответственно .alignright — название класса для картинок, которые находятся справа от текста. Все картинки, которые имеют название этих классов будут обрабатываться согласно параметрам, указанным в скобках после названия класса, это:
float:left и float:right – размещают картинку слева или справа от текста;
margin-right и margin-left – указывают на то, какой отступ будет от картинки у обтекаемого текста расположенного только справа или слева от неё.

Что касается обтекания текстом картинки расположенной по центру – это тоже возможно, правда тут будут использоваться другие параметры, так как параметра float:center не существует:

.imgcenter {
    display:block; 
    margin:15px auto 0;
}

Опять же, .imgcenter – название класса для всех картинок, которые мы хотим разместить по центру экрана. Параметр display:block — присваивает картинке характеристику блочного элемента, что избавляет от необходимости заключать картинку в

или

. Так как картинку по центру текст будет обтекать со всех сторон, то мы используем параметр margin, который отвечает за отступы со всех четырех сторон (слева-справа, сверху-снизу)и задает ему расстояние отступа, в данном случае это: 15 пикселей от верхнего края, автоматическое значение слева и справа (именно это значение центрирует наш блок на странице) и 0 пикселей от нижнего края.

Этот код можно вставить в любую часть кода, но чтобы не мусорить в файле и не разбрасывать код, отвечающий за схожие элементы, лучше найдите место, где задаются значения для изображений. В дальнейшем, если вы захотите что-то изменить, вам тоже будет легче найти этот код, несмотря на возможность поиска по файлу.
Так же для лучшего визуального отделения картинки от текста её можно взять в рамку. Делается это при помощи следующего кода:

#content img {
  padding: 5px; background: #fff; border: 1px solid #ccc;
}

Строчкой #content img мы задаем правило для всех изображений, которые находятся в «теле» нашей записи. Параметр padding: устанавливает значение полей вокруг содержимого элемента, background: — устанавливает фон для полей вокруг наших картинок, border: — рисует рамку для картинки, а параметр solid: указывает на то, что рамка будет нарисована непрерывной линией. Значениями #fff и #ссс мы задаем цвет нашим параметрам.
В итоге мы получаем следующий результат:

3 комментария к “Текст не обтекает картинки — есть решение!”

  1. В мой теме ничего не меняется. Причем сам файл css странно прописан, без кодов, а со ссылкой на тему автора.

  2. Отлично! Спасибо!

    Мария — вам нужно найти в корне сайта (точнее вашей темы) файл style.css и будет чудо

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *