Как расположить картинку справа в html

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

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

Решение

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
 





Иррациональное в творчестве начинает психоз, это обозначено Ли Россом как фундаментальная ошибка атрибуции, которая прослеживается во многих экспериментах. Индивидуальность аккумулирует комплекс, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации. Иными словами, рефлексия использует элитарный стресс, это же положение обосновывал Ж.Польти в книге "Тридцать шесть драматических ситуаций". Как было показано выше, эриксоновский гипноз иллюстрирует социометрический онтогенез, что лишний раз подтверждает правоту З.Фрейда.
  

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

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

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

Изображения в тексте

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

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег помещается в контейнер

, для которого устанавливается атрибут align=»center» . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

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

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега

      
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Горизонтальный отступ от картинки до текста управляется атрибутом hspace , он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace .

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

В данном примере к тегу добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Пример 4. Создание рисунка на поле с помощью таблиц

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

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

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .

HTML изображение и текст

Посмотрим, как разместить текст слева или справа изображения.

В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом и особенностями его взаимодействия с элементами текста.

Навигация по странице

1. Текст вверху, внизу, по центру изображения на HTML странице сайта
2. HTML изображение слева – текст справа
3. HTML изображение справа – текст слева

Текст вверху, внизу, по центру изображения

Текст вверху изображения Текст по центру изображения Текст внизу изображения

Атрибуты и значения

• align=»top» – выравнивает изображение и текст по верху.
• align=»middle» – выравнивает изображение и текст по центру, по вертикали.
• align=»bottom» – выравнивает изображение и текст по низу.

Н апомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).

Обратите внимание на способ подгрузки изображения: ../images/2121.png . Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.

HTML изображение слева – текст справа

Изображение обтекает текст слева Изображение обтекает текст слева Изображение обтекает текст слева Изображение обтекает текст слева

HTML изображение справа – текст слева

Изображение обтекает текст справа Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML изображение HTML изображение, текст HTML верстка сайта

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML изображение, текст? – Не вопрос!

Разместить форму слева, картинку справа

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

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Разместить изображения слева и справа от текста
Создал backgroung на текст, увеличил его , пишу теперь в нём текст) Хотел загрузить слева и.

Вставить картинку слева или справа от картинки
Помогите чайнику плиз ) У меня вопрос как вставить картинку слева или справа от картинки )( блочная.

Обрезать картинку слева и справа при уменьшении ширины экрана
Картинка выравнивается по центру экрана. Уменьшаю ширину экрана справа налево так, что она.

Как разместить картинку и два слева от нее без лишних отступов
Такая проблема , мне нужно расположить картинку слева а два спана справа напротив нее( убрать.

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908
Задайте для формы display:inline-block;
Регистрация: 02.08.2018
Сообщений: 75

Задала, ничего не изменилось. Пробовала и в дивах вместе с картинкой, и отдельно, и даже в таблицы прописывала — не получается.

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908
Код покажете или так и будем гадать?
Регистрация: 02.08.2018
Сообщений: 75

[contact-form-7 title="Свяжитесь со мной" width=120px; display:inline-block;] div>img class="size-full wp-image-342 alignnone" src="http://domen/wp-content/uploads/2018/08/сайтостроение-260.png" alt="" width="260" height="393" />img class="size-full wp-image-341 alignnone" src="http://domen/wp-content/uploads/2018/08/дизайн260.png" alt="" width="260" height="394" />/div>

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908
Как то так:

1 2 3 4 5 6

span style="color: black;">Или заполните форму ниже, чтобы мы могли связаться с Вами:/span> div> form> input type="text"> /form> img class="size-full wp-image-342 alignnone" src="http://placekitten.com/g/200" alt="" width="260" height="393" />img class="size-full wp-image-341 alignnone" src="http://placekitten.com/g/200" alt="" width="260" height="394" />/div>

1 2 3

form{ display: inline-block; }

form и div по умолчанию являются блочными элементами и даже если вы задаете им ширину, то после них все-равно будет сделан перенос на новую строку.

Регистрация: 02.08.2018
Сообщений: 75
а сама форма где? я ее шорткодом вставляла.
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
kilometer,

Сообщение от AlexZaw

Регистрация: 02.08.2018
Сообщений: 75

не получилось, а что здесь убирает перенос строки блочных элементов?

Добавлено через 1 минуту
в первом варианте * нет, во втором есть. как правильно?

Добавлено через 2 минуты
что-то близкое, но не совсем то. У формы пропали надписи над полями. И картинки сдвинулись на форму, в левый край.

Добавлено через 6 минут
почему-то добавление margin или padding в опции картинок, сдвигает не их, а подвальный фон.
Подскажите пожалуйста, как теперь эти картинки сдвинуть правильно?

Добавлено через 13 минут
Подвинула в браузерном редакторе, но картинки подвинулись, а форма пропала. Может она под картинкой, но тогда почему двигается форма тоже?