Содержание

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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><img src="images/rock.jpg" alt="Иллюстрация" 
  >
  Гармония, в первом приближении, параллельно образует экзистенциальный 
  художественный талант, как и предсказывает теория о бесполезном знании. 
  Действие, в том числе, выстраивает понимающий архетип, однако само по 
  себе состояние игры всегда амбивалентно. Композиция, в представлении 
  Морено, диссонирует невротический объект, что-то подобное можно встретить 
  в работах Ауэрбаха и Тандлера. Бессознательное, конечно, диссонирует 
  экспериментальный символизм, таким образом осуществляется своего рода 
  связь с темнотой бессознательного.
 
 
  После того как тема сформулирована, 
  либидо параллельно.</p>
  <p>Иррациональное в творчестве начинает психоз, это обозначено Ли Россом как 
  фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах. 
  Индивидуальность аккумулирует комплекс, именно об этом комплексе движущих сил 
  писал З.Фрейд в теории сублимации. Иными словами, рефлексия использует элитарный 
  стресс, это же положение обосновывал Ж.Польти в книге "Тридцать шесть 
  драматических ситуаций". Как было показано выше, эриксоновский гипноз 
  иллюстрирует социометрический онтогенез, что лишний раз подтверждает правоту
  З.Фрейда.</p> 
 </body>
</html>

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

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

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

Как переместить изображение вверх в html/css




Я совсем новичок в HTML, и я хотел иметь изображение на своей странице, но когда я использую

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

<html dir="rtl"> <body> ... <img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" ... </div> </body> </html>

Я не использую теги <head> и <style> .
Я пытался использовать position:relative;top:-10px;, но я не могу понять, как его использовать, или у него есть какие-то проблемы с «float». Кто-нибудь может мне помочь, что делать?
Заранее спасибо и спасибо всем, кто пытался решить эту проблему до сих пор.

..

html css
Поделиться Источник Friendly Fella     25 ноября 2016 в 03:50

3 ответа

  • Как выровнять изображение, чтобы переместить его вертикально вверх? (CSS,HTML)?

    Основной вопрос CSS/HTML. Как показано на моем скриншоте, слева есть изображение стрелки, я хочу переместить ее таким образом, чтобы средняя точка стрелки была немного выше средней точки следующего за ней текста. Вероятно, это базовый материал, но какое свойство в css поможет мне это сделать? У…

  • CSS: как переместить #thumbnails вверх между #header и #content с CSS (нет JavaScript, динамическая ширина и высота, не меняется HTML)?

    Как переместить #thumbnails вверх между #header и #content с CSS (нет JavaScript), не меняя HTML и сохраняя динамическую ширину и высоту для всех тегов div? Код в состоянии http://jsfiddle.net/laukstein/XdJxu / HTML: <div id=container> <div id=header>1. header</div> <div…


3

измените значение top по мере необходимости

#img{
  position: relative;
  top:-10px;
  }
<img src="https://i.stack.imgur.com/W1bSf.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;">

Поделиться Dream Hunter — hashADH     25 ноября 2016 в 03:55


1

Эта корневая проблема (что изображение и <hr> пересекаются друг с другом) звучит как проблема clearfix.

Когда у вас есть плавающий элемент, он может выглядеть как «overlap» неплавающих элементов:

#float {
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}

hr {
  border: 4px solid blue;
}
 
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>

Но вместо того, чтобы пытаться просто переместить поплавок вверх, вы можете добавить clear: both к вашему <hr> :

#float {
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}

hr {
  border: 4px solid blue;
  clear: both;
}
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>

Поделиться Alfred Xing     25 ноября 2016 в 04:03


0

<img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;margin-bottom:5px">

margin-bottom:5px; будет работать нормально или вы можете изменить значения в соответствии с вашими потребностями

или предоставьте демо-код для лучшего просмотра

Поделиться Amit Kumar Pawar     25 ноября 2016 в 03:53

  • CSS: как расположить счетчик слайд-шоу вверх в слайд-шоу

    Я боролся с этим вопросом CSS. Вот сайт , на котором я работаю. [изучение drupal, css и т. д., Так что игнорируйте дизайн], смотрите счетчик изображений прямо под слайд-шоу, прямо сейчас, всего 1, 2. я хочу, чтобы этот счетчик отображался внутри изображения, внизу справа. Я перепробовал все, что…

  • Как сделать изображение скользящим вверх, когда подпись скользит вверх?

    Я создал следующий фрагмент html: http://jsfiddle.net/4gDMK/ это хорошо работает, но я не могу найти способ переместить подписи и изображение одновременно вверх, чтобы изображение больше не было полностью видно. Вот база html: <figure> <img…

Похожие вопросы:


Как переместить изображение с помощью css/html

Я пытаюсь переместить изображение. Я хочу, чтобы он был полностью согласован с названием Experience. Вот мой код html код <header> <h2>Experience</h2> <div class=logo>…


Не удается поднять изображение вверх с помощью отступа css

Вот ссылка на изображение сайта: Имиджевый Сайт Если вы посмотрите, у меня есть изображение, установленное в пределах серого фонового круга. Само изображение располагается внутри круга. Я установил…


Вручную переместить текст вверх html

Я очень новичок в HTML и только начал делать свой первый сайт. Мне просто было интересно, как можно было бы переместить текст через HTML, а не CSS, говорят, что картинка стоит тысячи слов: Итак, моя…


Как выровнять изображение, чтобы переместить его вертикально вверх? (CSS,HTML)?

Основной вопрос CSS/HTML. Как показано на моем скриншоте, слева есть изображение стрелки, я хочу переместить ее таким образом, чтобы средняя точка стрелки была немного выше средней точки следующего…


CSS: как переместить #thumbnails вверх между #header и #content с CSS (нет JavaScript, динамическая ширина и высота, не меняется HTML)?

Как переместить #thumbnails вверх между #header и #content с CSS (нет JavaScript), не меняя HTML и сохраняя динамическую ширину и высоту для всех тегов div? Код в состоянии…


CSS: как расположить счетчик слайд-шоу вверх в слайд-шоу

Я боролся с этим вопросом CSS. Вот сайт , на котором я работаю. [изучение drupal, css и т. д., Так что игнорируйте дизайн], смотрите счетчик изображений прямо под слайд-шоу, прямо сейчас, всего 1,…


Как сделать изображение скользящим вверх, когда подпись скользит вверх?

Я создал следующий фрагмент html: http://jsfiddle.net/4gDMK/ это хорошо работает, но я не могу найти способ переместить подписи и изображение одновременно вверх, чтобы изображение больше не было…


Как переместить элемент DIV немного вверх

У меня есть проблема с изображением домашней ссылки, которое я закодировал для своей зависшей навигационной панели. URL к моему блогу выглядит следующим образом : http://www.blankesque.com . В…


Как переместить изображение в div с помощью CSS?

У меня есть изображение, расположенное внутри div, я пытаюсь переместить его на 50 пикселей вниз и на 50 пикселей влево, чтобы все было завершено. Но я не уверен, как отредактировать изображение в. ..


Как переместить изображение при прокрутке вниз или вверх страницы?

В моем коде ниже я хочу переместить изображение div вверх и вниз, когда я прокручиваю. Когда я прокручиваю страницу вверх, я хочу переместить изображение вниз, а когда я scroll вниз, я хочу…

html — Как сдвинуть картинку влево?

html — Как сдвинуть картинку влево? — Stack Overflow на русском

Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.

Присоединиться к сообществу

Любой может задать вопрос

Любой может ответить

Лучшие ответы получают голоса и поднимаются наверх

Вопрос задан

Просмотрен 17k раз

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 6 лет назад.

Не могу поднять картинку, пробую такой код:

<span><img src="/images/welcome.gif"></span>

— но она не хочет подниматься.

AntonioK

3,1691818 серебряных знаков4242 бронзовых знака

задан 9 июл ’12 в 13:28

d1b2d1b2

12722 золотых знака44 серебряных знака99 бронзовых знаков

5

1:

 <span><img src="/images/welcome. gif"></span>

2:

<span><img src="/images/welcome.gif"></span>

P.S: Для позиционирования лучше подойдёт тег div а тег span заставляеь всех детей наследовать его стили

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *