Разделы

Как сделать, чтобы фотография располагалась по правому краю окна браузера?

По умолчанию, фотография на странице располагается по левому краю окна браузера, а близлежащий текст выравнивается по нижней кромке изображения. Чтобы задать выравнивание по правому краю для селектора IMG следует установить стилевой атрибут float со значением right.

Не все фотографии на странице следует выравнивать указанным образом, поэтому лучше ввести специальный класс, назовем его rightfoto, и будем добавлять только к нужным изображениям. Также вокруг фотографии желательно добавить отступы через атрибут margin, чтобы между текстом и изображением появилось пустое пространство (пример 1).

Пример 1. Выравнивание фотографии по правому краю

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Выравнивание фотографии</title>
  <style type="text/css">
   .rightfoto {
    float: right; /* Выравнивание по правому краю */
    margin: 0 0 5px 5px; /* Отступы вокруг фотографии */
   }
  </style>
 </head>
 <body>
  <p><img src="rock.jpg" alt="Иллюстрация" width="200" height="272" class="rightfoto">
  Гармония, в первом приближении, параллельно образует экзистенциальный художественный 
  талант, как и предсказывает теория о бесполезном знании. Действие, в том числе, 
  выстраивает понимающий архетип, однако само по себе состояние игры всегда 
  амбивалентно. Композиция, в представлении Морено, диссонирует невротический 
  объект, что-то подобное можно встретить в работах Ауэрбаха и Тандлера. 
  Бессознательное, конечно, диссонирует экспериментальный символизм, 
  таким образом осуществляется своего рода связь с темнотой бессознательного. 
  После того как тема сформулирована, либидо параллельно.</p>
  <p>Иррациональное в творчестве начинает психоз, это обозначено Ли Россом как 
  фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах. 
  Индивидуальность аккумулирует комплекс, именно об этом комплексе движущих сил 
  писал З.Фрейд в теории сублимации. Иными словами, рефлексия использует элитарный 
  стресс, это же положение обосновывал Ж.Польти в книге "Тридцать шесть 
  драматических ситуаций". Как было показано выше, эриксоновский гипноз 
  иллюстрирует социометрический онтогенез, что лишний раз подтверждает правоту
  З.Фрейда. Как было показано выше, эгоцентризм начинает статус художника, однако 
  само по себе состояние игры всегда амбивалентно. Драматизм выстраивает 
  первоначальный аутизм, что отмечают такие крупнейшие ученые как Фрейд, 
  Адлер, Юнг, Эриксон, Фромм.</p> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Фотография, выровненная по правому краю

Атрибут float не только выравнивает элемент по правому или левому краю, но одновременно устанавливает вокруг элемента обтекание. При этом другие объекты, например текст, плотно к нему прилегают. Это легко избежать, если воспользоваться универсальным атрибутом margin, который одновременно задает отступ сверху, справа, снизу и слева от фотографии.

Разделы

Термины

Как сделать, чтобы фотография располагалась по правому краю окна браузера?

Отправить комментарий