Выравнивание картинок в 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.8k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
Спасибо большое! Этот результат также пригодился на другом сайте, где встречается текст с изображениями вперемешку.
Как разместить две фотографии рядом по горизонтали?
Не получается разместить в одном две фотографии по горизонтали. В приоритете в css коде это сделать.
- Вопрос задан более трёх лет назад
- 4152 просмотра
Комментировать
Решения вопроса 3
WapSter @wapster92 Куратор тега CSS
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
display: flex;
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Начинающий верстальщик
.img-div
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Почему popup окно открывается только со второго нажатия?
- 1 подписчик
- 51 минуту назад
- 15 просмотров
- JavaScript
- +3 ещё
Как сделать ограничитель поля символов?
- 1 подписчик
- час назад
- 29 просмотров
- HTML
Допустимо ли двоеточие в значении атрибута data?
- 1 подписчик
- 4 часа назад
- 47 просмотров
- HTML
- +3 ещё
Почему появляется горизонтальный скролл при использовании grid?
- нет подписчиков
- 22 часа назад
- 63 просмотра
- HTML
- +1 ещё
Как разместить блоки в два ряда?
- 1 подписчик
- вчера
- 60 просмотров
- CSS
- +2 ещё
Подключение boostrap vue?
- 1 подписчик
- 05 янв.
- 71 просмотр
- HTML
- +1 ещё
Как реализовать звездный рейтинг с частичным закрашиванием звезд?
- 2 подписчика
- 05 янв.
- 433 просмотра
- HTML
- +1 ещё
Почему высота span не такая как у родителя при height:100%?
- 1 подписчик
- 05 янв.
- 74 просмотра
- CSS
Почему элемент с шириной fit-content и ограничением max-width: 100% выходит пределы экрана?
- 1 подписчик
- 05 янв.
- 47 просмотров
- PHP
- +1 ещё
Вставка значения из php в html?
- 1 подписчик
- 05 янв.
- 488 просмотров
от 35 000 до 40 000 ₽
от 210 000 ₽
08 янв. 2024, в 15:37
90000 руб./за проект
08 янв. 2024, в 14:52
2500 руб./в час
08 янв. 2024, в 14:44
1500 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Есть ли не официальные аналоги миджорни апи?
- 3 подписчика
- 1 ответ
- 4 подписчика
- 1 ответ
- 3 подписчика
- 0 ответов
- 3 подписчика
- 3 ответа
- 2 подписчика
- 0 ответов
- 2 подписчика
- 4 ответа
- 2 подписчика
- 3 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 0 ответов
- 2 подписчика
- 2 ответа
Как разместить несколько картинок рядом по горизонтали?
Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали.
Решение
Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов
автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.
Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 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. Вид фотографий, оформленных с помощью стилей
Варианты горизонтального выравнивания блоков и картинок по центру справа слева
Часто головной болью начинающих веб-мастеров является корректное выравнивание картинок или блоков по горизонтали и их адаптивное поведение при разных расширениях экрана.
Как выравнять картинку по горизонтали: справа, слева, по центру?
Из указанной ниже информации следует вывод: чтобы выровнять картинку справа, слева, по центру, её необходимо поместить в блок DIV, а затем продолжать работу с этим блоком. Это современный подход к проблеме, когда набрал обороты блочный вид вёрстки контента.
Проблема выравнивания и адаптивности изображения к любому разрешению экрана пропадает сама по себе, когда вы используете фреймворки типа Bootstrap.
В обычной практике используется несколько вариантов выравнивания элементов в один ряд по горизонтали. Наиболее часто используются методы:
— Float;
— Inline-block;
— Table-cell (устаревший после выхода HTML5).Каждый из них имеет свои недостатки и преимущества. Рассмотрим 2 варианта: Float и Inline-block.
Вариант с использованием Float
Стиль Float используется при блочной вёрстке.
Любой блочный элемент будет размещаться с новой строки не зависимо от присвоенной ему ширины. Даже если уменьшать размер блока div по ширине блоки в один ряд не встанут.Здесь на помощь придёт Float: left или right.
Он делает блочный элемент плавающим и выравнивает его по левому или правому краю основного блока. Также Float способствует обтеканию элемента текстом.Для примера, создадим четыре блока, которые нужно разместить в ряд:
Значения стиля в файле CSS:
.block { float: left; /* обтекание */ line-height: 60px; /* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-top: 60px; margin-right: 10px; >Получает результат, который вы видите на картинках ниже.
При отсутствии float: left;
С размещенным float: left;
При уменьшении экрана, когда блоки благодаря своему размеру width: 180px; перестанут умещаться в одну линию, они начнут складываться друг под друга.
Этот же пример с использованием float: right;
Как видите блоки (судя по тексту в них) поменяли порядок размещения. Браузер обработал их сверху вниз и выровнял по правому краю, соблюдая очерёдность — сначала выравнял первый, потом второй и т.д. При работе со свойством float: right; имейте это ввиду.
Для прерывания действия свойства обтекания элементов используется конструкция:
В примерах выше расстояния между блоками задаются при помощи отступа margin-right.
Допустим нам необходимо разместить блоки в один ряд по центру и задать отступы между ними.В этом случае поступаем так:
CSS код:
.content { width: 750px; /* фиксируем ширину родительского блока */ margin: 0 auto; /* центрируем родительский блок */ background: #FFFFCC; height: 60px; /* Высота родителя */ > .block { float: left; /* Задаем обтекание */ line-height: 60px;/* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-right: 10px; > .content :last-child { margin-right: 0px; /* Убираем последнее правое поле* / >Результат:
На практике могут встретиться различные ситуации, но всех особенностей в одной статье не рассмотреть.
Метод «Inline-block»
Как уже говорилось, блочные и строчные элементы имеют свои недостатки и преимущества в зависимости от поставленной задачи. Возьмём только преимущества и попробуем их объединить. Для этого знакомимся со свойством display: inline-block.
Свойство display: inline-block создаёт блочно-строчный элемент, который можно расценивать как строчный, с сохранением блочных свойств. Он позволяет изменять линейные параметры, задавая отступы, поля и т.п.
Свойства блочно-строчного элемента:
— ширина и высота блока определяется автоматически, в зависимости от содержимого и присутствия отступов padding.
— ширину и высоту блока можно задать фиксировано.
— эффект свёртывания границ отсутствует.Приведу пример простого меню с картинкой и текстовой ссылкой с использованием блочно-строчного элемента.
Ссылка меню 1 длиннее обычного
Ссылка меню 2
Ссылка меню 3
Ссылка меню 4
