Как сделать картинку и текст на одном уровне html
Перейти к содержимому

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

  • автор:

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

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

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

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

, для которого устанавливается атрибут 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 .

Как расположить текст на одном уровне с картинкой

Сейчас: Сейчас Нужно: Необходимый результат

Отслеживать
задан 4 июн 2017 в 15:01
user234223 user234223
736 2 2 золотых знака 10 10 серебряных знаков 21 21 бронзовый знак

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно вложить в таблицу:

 

Для кого это необходимо?

Розничная торговля
Интернет торговля
Кафе и ресторан
Сфера услуг

Отслеживать
ответ дан 4 июн 2017 в 15:53
2,225 1 1 золотой знак 10 10 серебряных знаков 21 21 бронзовый знак

  • html
  • css
    Важное на Мете
Похожие

Как расположить два тега


на одном уровне?

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как поставить картинку рядом с текстом?

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

  • Вопрос задан более трёх лет назад
  • 17402 просмотра

Комментировать

Решения вопроса 3

artur_kudaev

Артур @artur_kudaev

Frontend Developer

float: right

Ответ написан более трёх лет назад

Нравится 1 2 комментария

Kasperenysh

Евгений @Kasperenysh

Или display: flex;

Opiatov_krug @Opiatov_krug Автор вопроса

не рааботает

BoriHagen

Вообще будет шикарно если вы выложите html и css вашего проекта сюда для понимания, а то может какие то стили уже прописаны и мешают отображению как вам нужно.
Ну как вариант — обернуть текст в параграфе и картинку в блок. Блоку дать стиль display: flex;

 

Текст

Ответ написан более трёх лет назад

Выравнивание картинки и текста на одном уровне

Доброго времени суток! У меня возникла проблема при верстке. Никак не могу сделать данный текст и картинку на одном уровне. Помогите разобраться. Вот код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
div class="about_right"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> img src="img/about1.jpg"> /div> div class="about_left"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> img src="img/about2.jpg"> /div> div class="about_right"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> img src="img/about3.jpg"> /div> div class="about_left"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p>

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

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

RxRichEdit выравнивание текста и картинки
Доброго дня установил компоненты rxlib разместил у себя на форме объект rxrichedit в свойствах.

Выравнивание текста справа от картинки
Возник вопрос , как сделать текст сразу после картинки ? Пример во вложении

Выравнивание картинки относительно текста, CSS
Добрый день, очень хочется получить помощь в простом вопросе, но перепробовал все коды, что нашел.

154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
Стилей вообще никаких нет?
Регистрация: 01.04.2016
Сообщений: 77

Стили мне сейчас не обязательны. Мне сначала с позиционированием разобраться, а потом займусь и стилями

154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351

Лучший ответ

Сообщение было отмечено AndyFEED как решение

Решение

ЦитатаСообщение от AndyFEED Посмотреть сообщение

Мне сначала с позиционированием разобраться
это можно сделать с помощью flexbox :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
div class="about_right"> div class="text_wrap"> h1>July 2010/h1> h1>Our Humble Beginnings/h1> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> /div> div class="image_wrap"> img src="img/about1.jpg"> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
.about_right { display: flex; flex-flow: row nowrap; align-items: center; } .about_right .text_wrap { text-align: right; } .text_wrap { padding: 0 30px 0 0; flex: 0 1 50%; } .image_wrap { flex: 0 0 auto; border-radius: 50%; overflow: hidden; }

Регистрация: 01.04.2016
Сообщений: 77
Уже все сделал сам) Вот:
Кликните здесь для просмотра всего текста

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
div style="overflow: hidden;"> div id="about_first" style="width: 100%;"> div class="about_text_right" style="float: left; width: 250px; height: 185px;"> h1>July 2010/h1> h4>Our Humble Beginnings/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. /p> /div> div class="about_img_right" style="float: left; width: 100px; height: 185px;">img src="img/about1.jpg"> /div> /div> /div> div style="overflow: hidden;"> div id="about_second"> div class="about_text_left" style="float: right; width: 250px; height: 185px;"> h1>January 2011/h1> h4>Facing Startup Battles/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus. /p> /div> div class="about_img_left" style="float: right;">img src="img/about2.jpg"> /div> /div> /div> div style="overflow: hidden;"> div id="about_first" style="width: 100%;"> div class="about_text_right" style="float: left; width: 250px; height: 185px;"> h1>December 2012/h1> h4>Enter The Dark Days/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni. /p> /div> div class="about_img_right" style="float: left; width: 100px; height: 185px;">img src="img/about3.jpg"> /div> /div> /div> div style="overflow: hidden;"> div id="about_second"> div class="about_text_left" style="float: right; width: 250px; height: 185px;"> h1>february 2014/h1> h4>Our Triumph/h4> p> Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean. /p> /div> div class="about_img_left" style="float: right;">img src="img/about4.jpg"> /div> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
.about_text_right h1 { color: #222; font-size: 18px; text-align: right; margin: 0; line-height: 1.55em; } #about_first { padding-left: 90px; margin-top: 90px; } .about_text_right p { color: #777; font-size: 14px; text-align: right; margin: 0; line-height: 1.55em; } .about_text_left h1 { color: #222; font-size: 18px; text-align: left; margin: 0; line-height: 1.55em; } .about_text_left h4 { color: #222; font-size: 18px; text-align: left; margin-top: 5px; margin-bottom: 5px; line-height: 1.55em; } .about_text_right h4 { color: #222; font-size: 18px; text-align: right; margin-top: 5px; margin-bottom: 5px; line-height: 1.55em; } #about_second { padding-right: 100px; margin-top: 90px; } .about_text_left p { color: #777; font-size: 14px; text-align: left; margin: 0; line-height: 1.55em; } .about_img_right { margin-left: 30px; } .about_img_left { margin-right: 30px; }

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

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