В некоторых случаях не работает обтекание изображений текстом. Человек вставляет картинку в блог, в параметрах картинки ставит ее расположение слева к примеру и надеется что после публикации, сама картинка будет слева, а в правой части будет текст, но это не всегда выглядит так, как показывает нам редактор WordPress.
А происходит этот как правило в тех случаях, когда в файле CSS-стилей шаблона WordPress не прописаны стандартные стили для правильного обтекания текстом изображений. Эти стили можно найти на сайте WordPress.
Для себя и для вас, решил опубликовать их в своем блоге, если у вас не работает обтекание текстом в WordPress, просто скопируйте следующий код и вставьте его в файл шаблона style.css.
.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;
}
Для красоты к строкам:
.alignleft {
float: left;
}
.alignright {
float: right;
}
Можно добавить еще параметр margin для того, чтобы сделать автоматический отступ между картинкой и текстом, в результате этот кусок кода будет выглядеть вот так:
.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.