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

В некоторых случаях не работает обтекание изображений текстом. Человек вставляет картинку в блог, в параметрах картинки ставит ее расположение слева к примеру и надеется что после публикации, сама картинка будет слева, а в правой части будет текст, но это не всегда выглядит так, как показывает нам редактор WordPress.

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

Для себя и для вас, решил опубликовать их в своем блоге, если у вас не работает обтекание текстом в WordPress, просто скопируйте следующий код и вставьте его в файл шаблона style.css.

Для красоты к строкам:

Можно добавить еще параметр margin для того, чтобы сделать автоматический отступ между картинкой и текстом, в результате этот кусок кода будет выглядеть вот так:

Комментарии: 26Напишите свой комментарий!

  1. andy Написал(а):

    огромное спасибо!!

    постоянно мучался с этими картинками

  2. rotor Написал(а):

    К последним примерам (.alignleft, .alignright) можно добавить и margin-bottom: 5px, чтобы текст не наползал на картину снизу :)

  3. ViCTiM Написал(а):

    Спасибо, как раз то что нужно было :)

  4. UdAvSt Написал(а):

    Спасибо! Наконец-то заработало как надо, теперь заметки выглядят по человечески.

  5. Genius Master Написал(а):

    Да, тоже долго мучился с некрасивым обтеканием, но потом взялся и наладил, оказалось все просто.

    Вопрос не по теме: Как сделать так чтобы мои Трекбеки отображались на других блогах. Отправил в общей сложности около 10 на разные блоги с разных статей, но они не отобразились. Первые отравил несколько месяцев назад последний неделю назад. Не отображаются! Движек WordPress, может быть что-то делаю неправильно, или ошибка какая-то в теме? Подскажите что делать? Заранее благодарен.

  6. Kolobochek Написал(а):

    Большое спасибо =)

    Так стало на много лучше и красивее, аж сайт выглядеть по-другому стал. Еще раз спасибо =)))

  7. Сергей Написал(а):

    Я все сделал как Вы описали, но обтекания не происходит, подскажите пожалуйста в чём может быть причина.

    С уважением Ляшенко Сергей

  8. rotor Написал(а):

    Для тех, у кого не происходит обтекание картинок.

    Скорее всего, придется обновить WordPress, так, как эта возможность была добавлена в последних версиях сборки движка (хотя могу ошибаться).

    Чтобы настроить обтекание в старых версиях, придется использовать классы к изображениям или наследование в CSS.

  9. Dmitriy Donchenko Написал(а):

    А если точнее то все эти классы добавлены с версии 2.5, а для того чтобы они работали, нужно вставить код в style.css а при добавлении картинки к записи, установить ей правильное выравнивание, все это делается в визуальном режиме редактирования записи.

  10. Супп! Написал(а):

    Одно время долго мучался с проблемой обтекания на одном из своих блогов. Позже нашел ответы на Wordprees.org. Дмитрию большое спасибо за подробную информацию по этому вопросу. Думаю, новичкам в WordPress она пригодится.

  11. Алекс Написал(а):

    Как то нужно было поправить текст справа от картинки у себя на блоге... Замучался искать как это сделать, а теперь когда уже не нужно нашел. Но лучше поздно чем никогда))

  12. Радкевич С. Написал(а):

    Большущее спасибо, целых 2 часа лазил по форумам, но там одна муть, а попробовал ваш способ — все отлично заработало. Теперь буду вставлять картинки почаще.

  13. JD Написал(а):

    Огромное спасибо! Сама в стилях не сильна, но теперь все супер!

  14. Vootshi Написал(а):

    Помогите кто нить... млин, я уже часа два вставляю эти куски кода в style.css и ничего не получается... скажите — куда именно надо вставить, я ваще не знаю всех этих тэгов, маюсь методом тыка и не выходит... пошОл топиться (((

  15. Денис Написал(а):

    Спасибо, большое спасибо!

  16. Саня Написал(а):

    Помогите пожалуйста как сделать так чтобы текст налез на картинку!?

  17. Dmitriy.Donchenko Написал(а):

    Наверное сделать картинку фоном? А поверх написать текст?

  18. Glam Написал(а):

    Спасибо большое. Долго разбирался, наткнулся на ваш блог в гугле, теперь все картинки обтекаются нормально :)

  19. Юлия Написал(а):

    Дмитрий, большое спасибо за инструкцию, как раз столкнулась с такой проблемой. Просьба — пишите, пожалуйста, куда именно (после какой строки) в файле вставлять код — для тех, кто еще не очень хорошо знает HTML.

  20. mixa Написал(а):

    Отличная инструкция. Взял на заметку.Спасибо

  21. Pasha Написал(а):

    Я весьма Вам благодарен. Ві спасли меня. Хорошо что в мир не без добріх людей.

  22. euGneSH Написал(а):

    Огромное спасибо за помощ! А то я пользуюсь шаблоном 2006 года, там это не учтено :)

  23. Сергей Написал(а):

    Спасибо, Вам! Сам долго мучился с оформлением картинок, но, благодаря вашей заметке, удалось красиво все сделать.

  24. Мирослав Написал(а):

    Отблагодарил :)

  25. Макс Написал(а):

    От души бро, тоже долго парился и добавлял изменения в код вручную к каждой статье))

  26. Павел Написал(а):

    Спасибо! Помогло. В Nano3 от Yooutheme как раз отсутствует данный кусок кода! Теперь все отлично. Отступы выглядят красиво при значении около 15px.

Оставьте комментарий Ваш шанс быть услышанным!