В некоторых случаях не работает обтекание изображений текстом. Человек вставляет картинку в блог, в параметрах картинки ставит ее расположение слева к примеру и надеется что после публикации, сама картинка будет слева, а в правой части будет текст, но это не всегда выглядит так, как показывает нам редактор WordPress.
А происходит этот как правило в тех случаях, когда в файле CSS-стилей шаблона WordPress не прописаны стандартные стили для правильного обтекания текстом изображений. Эти стили можно найти на сайте WordPress.
Для себя и для вас, решил опубликовать их в своем блоге, если у вас не работает обтекание текстом в WordPress, просто скопируйте следующий код и вставьте его в файл шаблона style.css.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } |
Для красоты к строкам:
|
1 2 3 4 5 6 7 |
.alignleft { float: left; } .alignright { float: right; } |
Можно добавить еще параметр margin для того, чтобы сделать автоматический отступ между картинкой и текстом, в результате этот кусок кода будет выглядеть вот так:
|
1 2 3 4 5 6 7 8 9 |
.alignleft { float: left; margin-right: 5px; } .alignright { float: right; margin-left: 5px; } |
26.03.2009 - 7:29 пп
огромное спасибо!!
постоянно мучался с этими картинками
26.03.2009 - 9:02 пп
К последним примерам (.alignleft, .alignright) можно добавить и margin-bottom: 5px, чтобы текст не наползал на картину снизу :)
27.03.2009 - 9:43 дп
Спасибо, как раз то что нужно было :)
27.03.2009 - 9:59 дп
Спасибо! Наконец-то заработало как надо, теперь заметки выглядят по человечески.
27.03.2009 - 6:43 пп
Да, тоже долго мучился с некрасивым обтеканием, но потом взялся и наладил, оказалось все просто.
Вопрос не по теме: Как сделать так чтобы мои Трекбеки отображались на других блогах. Отправил в общей сложности около 10 на разные блоги с разных статей, но они не отобразились. Первые отравил несколько месяцев назад последний неделю назад. Не отображаются! Движек WordPress, может быть что-то делаю неправильно, или ошибка какая-то в теме? Подскажите что делать? Заранее благодарен.
31.03.2009 - 12:45 дп
Большое спасибо =)
Так стало на много лучше и красивее, аж сайт выглядеть по-другому стал. Еще раз спасибо =)))
04.04.2009 - 5:33 пп
Я все сделал как Вы описали, но обтекания не происходит, подскажите пожалуйста в чём может быть причина.
С уважением Ляшенко Сергей
06.04.2009 - 12:41 пп
Для тех, у кого не происходит обтекание картинок.
Скорее всего, придется обновить WordPress, так, как эта возможность была добавлена в последних версиях сборки движка (хотя могу ошибаться).
Чтобы настроить обтекание в старых версиях, придется использовать классы к изображениям или наследование в CSS.
07.04.2009 - 9:49 дп
А если точнее то все эти классы добавлены с версии 2.5, а для того чтобы они работали, нужно вставить код в style.css а при добавлении картинки к записи, установить ей правильное выравнивание, все это делается в визуальном режиме редактирования записи.
12.04.2009 - 7:32 дп
Одно время долго мучался с проблемой обтекания на одном из своих блогов. Позже нашел ответы на Wordprees.org. Дмитрию большое спасибо за подробную информацию по этому вопросу. Думаю, новичкам в WordPress она пригодится.
13.04.2009 - 4:39 пп
Как то нужно было поправить текст справа от картинки у себя на блоге… Замучался искать как это сделать, а теперь когда уже не нужно нашел. Но лучше поздно чем никогда))
21.04.2009 - 1:18 пп
Большущее спасибо, целых 2 часа лазил по форумам, но там одна муть, а попробовал ваш способ — все отлично заработало. Теперь буду вставлять картинки почаще.
04.05.2009 - 7:58 пп
Огромное спасибо! Сама в стилях не сильна, но теперь все супер!
22.05.2009 - 8:22 пп
Помогите кто нить… млин, я уже часа два вставляю эти куски кода в style.css и ничего не получается… скажите — куда именно надо вставить, я ваще не знаю всех этих тэгов, маюсь методом тыка и не выходит… пошОл топиться (((
16.09.2009 - 12:23 дп
Спасибо, большое спасибо!
31.10.2009 - 4:34 пп
Помогите пожалуйста как сделать так чтобы текст налез на картинку!?
31.10.2009 - 5:16 пп
Наверное сделать картинку фоном? А поверх написать текст?
04.11.2009 - 10:01 пп
Спасибо большое. Долго разбирался, наткнулся на ваш блог в гугле, теперь все картинки обтекаются нормально :)
07.11.2009 - 8:35 пп
Дмитрий, большое спасибо за инструкцию, как раз столкнулась с такой проблемой. Просьба — пишите, пожалуйста, куда именно (после какой строки) в файле вставлять код — для тех, кто еще не очень хорошо знает HTML.
01.12.2009 - 9:23 дп
Отличная инструкция. Взял на заметку.Спасибо
06.12.2009 - 6:19 пп
Я весьма Вам благодарен. Ві спасли меня. Хорошо что в мир не без добріх людей.
07.01.2010 - 8:13 дп
Огромное спасибо за помощ! А то я пользуюсь шаблоном 2006 года, там это не учтено :)
26.01.2010 - 4:45 пп
Спасибо, Вам! Сам долго мучился с оформлением картинок, но, благодаря вашей заметке, удалось красиво все сделать.
07.11.2013 - 2:20 пп
Отблагодарил :)
19.01.2014 - 6:22 пп
От души бро, тоже долго парился и добавлял изменения в код вручную к каждой статье))
17.02.2016 - 12:36 пп
Спасибо! Помогло. В Nano3 от Yooutheme как раз отсутствует данный кусок кода! Теперь все отлично. Отступы выглядят красиво при значении около 15px.