Как разместить несколько картинок рядом по горизонтали?
Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали.
Решение
Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.
Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).
Пример 1. Картинки по горизонтали
HTML5 IE Cr Op Sa Fx
Фотографии Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.
Рис. 1. Фотографии, расположенные по горизонтали
Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги
в примере в одну строку.
Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom . В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений.
Пример 2. Отступы у фотографий
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фотографии
Результат данного примера показан на рис. 2.
Рис. 2. Вид фотографий, оформленных с помощью стилей
Две картинки рядом с помощью CSS — Вопросы по CSS
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Как разместить две фотографии рядом по горизонтали?
Не получается разместить в одном две фотографии по горизонтали. В приоритете в css коде это сделать.
- Вопрос задан более трёх лет назад
- 3840 просмотров
Комментировать
Решения вопроса 3
WapSter @wapster92 Куратор тега CSS
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
display: flex;
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Начинающий верстальщик
.img-div
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- час назад
- 18 просмотров
- HTML
- +1 ещё
Как пофиксти проблему с амперсантом?
- 1 подписчик
- 10 часов назад
- 53 просмотра
- HTML
- +2 ещё
Подобное поведение норма?
- 1 подписчик
- 12 часов назад
- 103 просмотра
- HTML
- +3 ещё
Почему не работает переход на страницу?
- 1 подписчик
- 12 часов назад
- 103 просмотра
- HTML
Почему html2pdf выдает пустой лист?
- 3 подписчика
- вчера
- 616 просмотров
- CSS
Что за баг с ховером?
- 1 подписчик
- вчера
- 98 просмотров
- HTML
- +1 ещё
Как блок вывести поверх других?
- 1 подписчик
- вчера
- 56 просмотров
- CSS
- +1 ещё
Почему не подгружается картинка?
- 1 подписчик
- вчера
- 85 просмотров
- CSS
- +2 ещё
Как Python и Selenium заставить найти текст?
- 1 подписчик
- 18 нояб.
- 53 просмотра
- HTML
- +1 ещё
Как сделать данное задание?
- 1 подписчик
- 17 нояб.
- 126 просмотров
от 35 000 до 40 000 ₽
от 150 000 ₽
20 нояб. 2023, в 07:54
13000 руб./за проект
20 нояб. 2023, в 07:06
20000 руб./за проект
20 нояб. 2023, в 02:49
5000 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Как перенести описание вниз?
- 2 подписчика
- 0 ответов
- 2 подписчика
- 0 ответов
- 3 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
- 2 подписчика
- 2 ответа
- 2 подписчика
- 4 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
Как разместить две картинки друг от друга?
Не могу разместить картинки друг от друга как на фото Пока вышло только так: HTML
#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo
Отслеживать
задан 12 ноя 2016 в 15:26
652 1 1 золотой знак 7 7 серебряных знаков 21 21 бронзовый знак3 ответа 3
Сортировка: Сброс на вариант по умолчанию
#header < position: relative; width: 100%; height: 501px; background: url(http://conceptartworld.com/wp-content/uploads/2013/09/Tank_Concept_Art_by_Chad_Weatherford_01.jpg); >#inner_wrap_logo
.png)
Отслеживать
ответ дан 12 ноя 2016 в 15:39
4,044 1 1 золотой знак 11 11 серебряных знаков 20 20 бронзовых знаков
#inner_wrap_logo нужно задавать overflow: hidden; или clearfix
12 ноя 2016 в 16:18
@ElenaSemenchenko зачем?
12 ноя 2016 в 16:23
Затем, что внутри плавающий блок второе изображение img
12 ноя 2016 в 16:27Вариант 1 flex:
#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo
Вариант 2 float:
#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo < margin: 0 auto; width: 960px; height: 100%; overflow: hidden; >#inner_wrap_logo img:first-of-type < float:left; >#inner_wrap_logo img:last-of-type
Отслеживать
ответ дан 12 ноя 2016 в 15:38
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаковHtml
Text 1Текст 2#one, #two
Отслеживать
ответ дан 12 ноя 2016 в 15:41
1,536 1 1 золотой знак 11 11 серебряных знаков 26 26 бронзовых знаков- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.