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

• Если человек ощущает свое участие в жизни общества, он создает не только материальные ценности для людей - он создает и самого себя. Из работы, в которой ярко выражен дух гражданственности, начинается истинное самовоспитание.

Афоризмы
• Поистине, подобно солнцу, люблю я жизнь и все глубокие моря. И вот что называю я познанием: чтобы все глубокое поднялось на высоту мою!

Афоризмы
• - «Оставайтесь голодными. Оставайтесь безрассудными». И я всегда желал себе этого. И теперь, когда вы заканчиваете институт и начинаете заново, я желаю этого вам.

Афоризмы
• Воспитание личности - это воспитание такого стойкого морального начала, благодаря которому человек сам становится источником благотворного влияния на других, сам воспитывается и в процессе самовоспитания еще более утверждает в себе собственное моральное начало.

Афоризмы

Сегодня

• Кто много знает, с того много и спрашивается.

• Не учись до старости, а учись до смерти.

• Без терпенья нет ученья.

• Знание лучше богатства.

• Учи показом, а не рассказом.

• Не для знания, а для экзамена.
• Знание — сила.

• Без муки нет и науки.

• Всему учен, только не изловчен.

• Велико ли перо, а большие книги пишет.

• Перо пишет, а ум водит.

• Не бойся, когда не знаешь: страшно, когда знать не хочется.
• Учение — путь к умению.

• Много ученых, мало смышленных.

• Наука учит только умного.

• Учи других — и сам поймешь.

• На все руки, кроме науки.

• Наукой люди кормятся.
• Писать — не языком чесать.

• От учителя наука.

• И медведя плясать учат.

• Не пером пишут — умом.

• Мудрым ни кто не родился, а научился.

• Корень учения горек, да плод его сладок.

Меню

Наши новости

Видео уроки

02 май 2024, 08:05

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

Грядёт Wi-Fi 8: когда он появится и что предложит вместо повышения скорости - «Новости сети»

Наш опрос

Помогли мы вам

Наши новости

24 март 2016, 17:40

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

25 апрель 2024, 01:19

Скачать приложение Betera на Android

25-03-2016, 14:24

Сделать, чтобы фотография располагалась по правому краю окна браузера - «Изображения»

Рейтинг:

Категория: Самоучитель CSS / Изображения

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Разместить фотографию по правому краю окна браузера, чтобы близлежащий текст обтекал её с других сторон.

Решение

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

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

Пример 1. Изображение по правому краю

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Выравнивание фотографии</title>
  <style>
   .rightpic {
    float: right; /* Выравнивание по правому краю */
    margin: 0 0 5px 5px; /* Отступы вокруг фотографии */
   }
  </style>
 </head>
 <body>
  <p><thumb src="images/rock.jpg" alt="Иллюстрация" 
   width="200" height="272" class="rightpic">
  Гармония, в первом приближении, параллельно образует экзистенциальный 
  художественный талант, как и предсказывает теория о бесполезном знании. 
  Действие, в том числе, выстраивает понимающий архетип, однако само по 
  себе состояние игры всегда амбивалентно. Композиция, в представлении 
  Морено, диссонирует невротический объект, что-то подобное можно встретить 
  в работах Ауэрбаха и Тандлера. Бессознательное, конечно, диссонирует 
  экспериментальный символизм, таким образом осуществляется своего рода 
  связь с темнотой бессознательного. После того как тема сформулирована, 
  либидо параллельно.</p>
  <p>Иррациональное в творчестве начинает психоз, это обозначено Ли Россом как 
  фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах. 
  Индивидуальность аккумулирует комплекс, именно об этом комплексе движущих сил 
  писал З.Фрейд в теории сублимации. Иными словами, рефлексия использует элитарный 
  стресс, это же положение обосновывал Ж.Польти в книге "Тридцать шесть 
  драматических ситуаций". Как было показано выше, эриксоновский гипноз 
  иллюстрирует социометрический онтогенез, что лишний раз подтверждает правоту
  З.Фрейда.</p> 
 </body>
</html>

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

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

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

Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Разместить фотографию по правому краю окна браузера, чтобы близлежащий текст обтекал её с других сторон. Решение По умолчанию, изображение на странице располагается по левому краю окна браузера, а близлежащий текст выравнивается по нижней кромке изображения. Чтобы задать выравнивание по правому краю для селектора IMG следует установить стилевое свойство float со значением right. Не все рисунки на странице следует выравнивать указанным образом, поэтому лучше ввести специальный класс, назовем его rightpic, и будем добавлять его только к нужным изображениям. Также вокруг рисунка желательно добавить отступы через свойство margin, чтобы между текстом и изображением появилось пустое пространство (пример 1). Пример 1. Изображение по правому краю HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. Рис. 1. Фотография, выровненная по правому краю Свойство float не только выравнивает элемент по правому или левому краю, но одновременно устанавливает вокруг элемента обтекание. При этом другие объекты, например текст, плотно к нему прилегают. Это легко избежать, если воспользоваться универсальным свойством margin, которое одновременно задаёт отступ сверху, справа, снизу и слева от изображения.

Комментариев: 0: 25-03-2016, 14:24

Распечатать

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

Еще новости по теме:

Другие новости по теме:

ДОБАВИТЬ БАННЕР

АВТОРИЗАЦИЯ

РегистрацияЗабыли?

ДОБАВИТЬ БАННЕР
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется."
«Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации.

«Все для веб-дизайнера - CSS»

Афоризмы

Афоризмы

Афоризмы

Афоризмы

• Кто много знает, с того много и спрашивается.

• Знание — сила.

• Учение — путь к умению.

• Писать — не языком чесать.

Учебник CSS

Самоучитель CSS

Новости

Справочник CSS

Афоризмы

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

Грядёт Wi-Fi 8: когда он появится и что предложит вместо повышения скорости - «Новости сети»

Написание эффективного кода

Базовый синтаксис CSS

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

Скачать приложение Betera на Android

Сделать, чтобы фотография располагалась по правому краю окна браузера - «Изображения»

Задача

Решение