Обтекание текста изображение на сайте стало стандартным, где уже не удивить пользователя. Но некоторые так и не знают, как можно создать по правую и по левую сторону. Где выставить размер картинки, а в стилистике можно редактировать отступы от самого изображение.
Чтоб сделать красивое обтекание текста картинку, и для этого корректно смотрелось на всем мобильных аппаратах, то здесь нужно задействовать свойство float. Также подробно разберем, как все нужно сделать, если поставить снимки по обе стороны, где зададим отступы по сторонам.
Пример работы стилистики:
HTML
Код
<h2>Создание сайта</h2>
<p><img src="http://zornet.ru/_fr/63/8769904.jpg" alt="Сталинградская битва" width="118" class="polevugan_savekan">Идет описание вокруг картинки</p>
<h2>Продвижение ресурса</h2>
<p><img src="http://zornet.ru/_fr/63/6670141.jpg" width="118" alt="Курская битва" class="pokavumaden_bedatum">Тот самый обтекаемый текст</p>
CSS
Код
.polevugan_savekan {
float:left; /* Выставляем по левую сторону */
margin: 9px 9px 9px 0; /* Отступы вокруг картинки */
}
.pokavumaden_bedatum {
float: right; /* Здесь задаем правую сторону*/
margin: 9px 0 9px 9px; /* Отступы вокруг картинки */
}
Вам остается задать параметры, это для того чтоб указать по какой стороне происходит выравнивание картинки. Здесь задействуем свойство margin - это для того чтобы текст не как не мог прилегать к тому элементу, где делаем обтекание.
Но и не нужно забывать, что за все отвечает свойство float. Если смотреть на примеры в demo странице, то видим первый снимок по левому краю, и второй по правую сторону.
Демонстрация
