Главная
Дизайн блога
Как сделать Обтекание Картинок и Видеороликов текстом?

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

Здравствуйте, дорогие друзья и читатели — Sozdaiblog.ru!

В этой статье Вы узнаете, как сделать HTML обтекание картинки текстом, а на десерт я покажу, как применить такой же эффект к видеоматериалам Вашего ресурса.

Не знаю почему, но половина разработчиков шаблонов для WordPress, при их создании игнорируют вставку функции обтекание картинки текстом. Сделано это специально или нет, мне узнать не удалось. Зато, нашлось лекарство для лечения этого недуга.

Итак.

Как сделать HTML обтекание картинки текстом.

Если, разработчик шаблона для вордпресс поленился довести до ума своё детище, то при вставке изображения в тело поста оно будет выглядеть следующим образом:

Конечно, это смотрится не очень красиво. Поэтому, нам нужно сделать обтекание картинки текстом.

Для этого, откройте папку с Вашей активной темой оформления, найдите файл — «style.css» и в самом конце добавьте кусок нового кода:


.alignnone {
margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
display:block;
margin: 5px auto 5px auto;
}

.alignright {
float:right;
margin: 5px 0 20px 20px;
}

.alignleft {
float:left;
margin: 5px 20px 20px 0;
}

.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

a img.alignright {
float:right;
margin: 5px 0 20px 20px;
}

a img.alignnone {
margin: 5px 20px 20px 0;
}

a img.alignleft {
float:left;
margin: 5px 20px 20px 0;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}

.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%;
padding: 5px 3px 10px;
text-align: center;
}

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
margin: 5px 0 20px 20px;
}

.wp-caption img {
border: 0 none;
height: auto;
margin:0;
max-width: 98.5%;
padding:0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

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

Таким образом, мы исправили косяк разработчика шаблона.

Но это ещё не всё.

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

При вставке видеоматериала в тело поста, с ним происходит та же беда, что и с картинками. Как и картинки, видео не обтекается текстом. На деле, это выглядит так:

Чтобы это исправить, открываем на редактирование уже знакомый файл — «style.css» и в самом конце добавляем новый стиль:

 #video-wrap {
 float: left;
 margin: 0 20px 5px 0;
 }

Теперь, при размещении нового видеоматериала, нужно, в WordPress открыть HTML-редактор и обернуть его код следующим образом:

<div id="video-wrap">Код Вашего видео</div>

После этих манипуляций, вновь вставленное видео, будет отображаться намного симпатичнее:

Вот такие простые способы помогут решить проблемы с обтеканием картинок и видеоматериалов Вашего ресурса печатным текстом.

Если, Вы знаете другие варианты, как сделать HTML обтекание картинки текстом, то обязательно напишите о них в комментариях.

Так же Вам понравится:

Как установить Google переводчик для сайта.

Как изменить цвет выделения текста в статье.

Как привлечь внимание к сниппету в Google.

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

На сегодня это всё. До новых статей…

С уважением, Денис Черников!