Как разместить несколько картинок рядом по горизонтали?
Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали.
Решение
Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.
Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 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. Вид фотографий, оформленных с помощью стилей
Выравнивание картинок в 1 ряд по горизонтали с переносами
Нужно выровнять изображения в 1 ряд, чтобы было все в ровень. А то получается что верхний ряд съезжает вниз из-за переносов
. Второй и последующие ряды отображаются нормально как надо. Правки могу внести только в CSS.
.pic < display: block >.pic img
Отслеживать
user262779
задан 22 окт 2018 в 20:39
Michail Sotnikov Michail Sotnikov
5 1 1 серебряный знак 3 3 бронзовых знака
Здравствуйте. Нужно выровнять верхний ряд изображений по горизонтали, чтобы они не смещались как в примере. Правки можно внести только в css файл. В html просто убрать лишние переносы BR нет возможности.
22 окт 2018 в 20:53
Вопрос перевел. На счет кода я пробовал присвоить родительскому диву ID #pic br
22 окт 2018 в 21:04
А зачем вообще с помощью
, задача такая? А то это геморный способ если честно и никто так не делает в жизни.
– user262779
22 окт 2018 в 21:12
Есть пара сайтов, в которых напарсено несколько тысяч галлерей с фотографиями. Раньше фото отображались в 1 ряд, сейчас в новых шаблонах должны отображаться в 2-3 ряда. Если править html, уйдет очень много времени. Ну если с css не получится, придется убирать как-то лишние переносы вручную. Потому что на автомате они уберутся и из текста
22 окт 2018 в 21:19
Интересует вопрос: Почему только в первом ряду изображения отображаются криво? Во втором, третьем и последующих все ровненько. И этот баг на всех браузерах.
22 окт 2018 в 21:21
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
.pic < display: flex; flex-wrap: wrap; >.pic img
Отслеживать
ответ дан 22 окт 2018 в 21:13
Alexandr Tovmach Alexandr Tovmach
2,212 2 2 золотых знака 9 9 серебряных знаков 26 26 бронзовых знаков
Спасибо. Уже ровно, но все изображения встали в 1 ряд. Как сделать автоматический перенос на следующий ряд? Для примера блок шириной 960px
22 окт 2018 в 21:26
Отредактировал ответ
22 окт 2018 в 21:54
Но ранее вы писали, что у вас текст сверху должен быть, в данном методе текст будет строго справа или слева, смотря в какое место он пишется. Если до img — тогда слева, после — справа!
.pic < display: flex; flex-wrap: wrap; >.pic img
Отслеживать
ответ дан 22 окт 2018 в 21:28
Павел Игоревич Павел Игоревич
873 5 5 серебряных знаков 20 20 бронзовых знаков
Большое спасибо! Заработало! Вопрос решен.
22 окт 2018 в 21:31
@MichailSotnikov да не за что, поставлю + Александру, я просто не заметил, что он раньше написал ответ(
22 окт 2018 в 21:32
@ПавелИгоревич Спасибо)
22 окт 2018 в 21:55
@AlexandrTovmach да не за что, я просто открыл полигон и ушел курить, а потом пришел и написал код )) Так что прошу прощения(
22 окт 2018 в 21:56
.pic < display: inline-block; float: left; >.pic > br < display: none; >.pic
Какой-то
Текст
Отслеживать
ответ дан 23 окт 2018 в 1:21
23.5k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
Спасибо большое! Этот результат также пригодился на другом сайте, где встречается текст с изображениями вперемешку.
Расположение картинок по горизонтали
подскажите как правильно оформить такой блок: в ряд должны быть расположены три блока с картинками, причем отступы должны быть только между средней картинкой и двумя крайними. если делать margin справа, то получается не нужный отступ у последней картинки с правой стороны, то же самое и про левый отступ, ток с другой стороны
1 2 3 4 5
div class="wrap"> div class="foto">img src="">/div> div class="foto">img src="">/div> div class="foto">img src="">/div> /div>
.wrap {width:700px} .foto {width:200px; float:left}
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Выравнивание картинок с подписью по горизонтали
Добрый день! Прошу помочь! Вставляю картинки в блок div и они прекрасно становятся по горизонтали.
Как убрать выравнивание по горизонтали в сетке картинок
Добырй День! Ставил Инфинити скрол с Масонри на пару и все поставилось все работает отлично.
Расположение картинок
Подскажите как мне расположить рядом с картинкой и описанием её, ещё одну картинку? (Во вложении.
2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11
aliasst, как-то так.
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
html lang="en"> head> meta charset="UTF-8"> title>Document/title> style> * html, body .wrap < width:700px; margin:0 auto >.line img .line>img:first-child .line>img:last-child /style> /head> body> div class="wrap"> div class="line"> img src="images/sun.gif" class="foto" alt="sun"> img src="images/sun.gif" class="foto" alt="sun"> img src="images/sun.gif" class="foto" alt="sun"> /div> div class="line"> img src="images/sun.gif" class="foto" alt="sun"> img src="images/sun.gif" class="foto" alt="sun"> img src="images/sun.gif" class="foto" alt="sun"> /div> /div> /div> /body> /html>
Но вариант не оптимальный.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Расположение ссылок-картинок
Всем привет! Я хочу сделать на своем сайте ссылки на социальные сети с помощью картинок, вроде.
Расположение картинок на странице HTML
Добрый день. Такой вопрос: как сделать так, чтобы следующая картинка на страница была ниже.
Расположение картинок в ячейке таблицы
Здравствуйте, как расположить картинки таким образом, который изображен на данном скриншоте в.
Расположение картинок в 3 ряда, друг под другом
Есть один div. В него с бека загружаются картинки. Нужно их расположить в 3 ряда, друг под другом.
Как расположить 4 картинки по горизонтали и 2 по вертикали в 2 ряда
необходимо таблицу расположить по центру по вертикали и по горизонтали
есть таблица, необходимо ее выровнять по центру относительно вертикали и горизонтали, и что бы при.
Как выставить слой по центру не только по горизонтали но и по вертикали?
использую метод margin:auto в сочетании с relative — только он дает правильную реакцию при.
Как расположить 3 блока с иконками по горизонтали
Коллеги, подскажите пожалуйста, как разместить 3 блока по горизонтали с иконками. Ширина всего.
Регистрация: 09.03.2010
Сообщений: 70
Сообщение от OoHikeoO 
хотел бы узнать как сделать 4 картинки по горизонтале а 2 по вертикале короче в 2 ряда
****
****
вот так
подскажите просто пожалуйста
)))))))
Не удержался.
ну самый простой способ это сделать
1 2 3 4 5 6 7 8 9 10 11 12 13 14
table> tr> td>img src="img1.jpg"/>/td> td>img src="img2.jpg"/>/td> td>img src="img3.jpg"/>/td> td>img src="img4.jpg"/>/td> /tr> tr> td>img src="img5.jpg"/>/td> td>img src="img6.jpg"/>/td> td>img src="img7.jpg"/>/td> td>img src="img8.jpg"/>/td> /tr> /table>
img должны лежать в папке с файлом html и хорошо бы им всем прописать свойство мax-height и max-width через стили например так
1 2 3 4 5
img{ мax-height:150px; max-width:150px; border:0px; /* Это для IE */ }
Coding is art
536 / 420 / 153
Регистрация: 04.09.2013
Сообщений: 1,056
а ещё можно:
1 2 3 4 5 6 7 8 9 10 11
ul class="grid"> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> li>img src="https://www.cyberforum.ru/html5/html5/html5/. " alt="" />/li> /ul>
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
ul.grid { list-style:none; margin:0; padding:0; } ul.grid:after{ content:''; display:block; width:100%; height:0px; clear:both; } ul.grid li { display: block; float:left; width:25%; /* можем поменять на 20 и сделать margin:0 2.5%;.. суть думаю понятна */ height: 150px; overflow:hidden; } ul.grid li img { display:block; max-width:100%; height: auto; /* или 150px */ margin:0 auto; }