» » >

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

19.09.2013, 16:32

Устаревший пример: используем hspace и vspace:

Нашему изображению, прописываем теги hspace и vspace, которые отвечают за отступ, такой вариант устарел по той причине что:

- прописываем теги каждому изображению
- атрибут нижнего отступа, автоматически прописывается верхнему

HTML-Code

<img align="left" width="310px" height="100px" hspace="10" vspace="10" alt="" src="#">
Устанавливаем css атрибуты изображению:

Вместо hspace и vspace, нашему изображению пропишем класс otstup-1 и пропишем ему нужный стиль, а именно внешний правый и нижний отступ.

HTML-Code

<img class="otstup-1" align="left" width="310px" height="100px" alt="" src="#">
CSS-Code

.otstup-1 {
  margin: 0px 15px 10px 0px;
}
Устанавливаем css атрибуты div ячейки:

А что делать, если мы не можем установить нужный класс, тому или иному изображению, например по той причине, что в системе uCoz мы используем для изображения параметр IMAGE1, тогда основной ячейки div, в котором расположен контент сайта, пропишем в стилях значение, которое будет говорить всем изображением этой ячейки, о нужных отступах.

HTML-Code

<div class="primer-2">  
  <img align="left" width="310px" height="100px" alt="" src="#">
  </div>
CSS-Code

.primer-2 img {
  margin: 0px 15px 10px 0px;
}
Устанавливаем только css атрибуты, без участие тега align="left":

В выше предоставленных примерах кода, мы устанавливали каждому изображению параметр
align="left", который и отвечает за обтекание изображения текстом, также можно прописать значение align="right", тогда наше изображение будет расположена по правому краю основной ячейки, а текст будет её обтекать по левому краю ячейки.

Но такой вариант начинает устаревать, по той причине, что на смену ему приходят css стили, а именно, мы убираем тег align="left" из нашего изображения и устанавливаем ему или основной ячейки div в которой расположено данное изображение нужный нам класс primer-3

HTML-Code

<div class="primer-3">  
  <img align="left" width="310px" height="100px" alt="" src="#">
</div>

а в css стилях, мы прописываем внешние отступы и синтаксис float:left; , который будет отвечать за расположение изображение в основной ячейки, в данном примере изображение расположено по левому краю ячейки, можно прописать float:right; тогда изображение будет расположено по правому краю ячейки.

HTML-Code

.primer-3 img {
  float:left;  
  margin: 0px 15px 10px 0px;
}

На этом и я закончу, приятных вам отступов...

Категория: HTML-CSS | Добавил: tashkent97
Просмотров: 1868 | Загрузок: 80 | Источник: www.center-dm.ru/ | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<