Форум Сайтостроение Веб-строительство

Проблема с расположением блоков

D
На сайте с 01.02.2016
Offline
38
Devero
266

Здравствуйте. Помогите пожалуйста с решением таких вопросов:

1. Есть 4 картинки, как мне их расположить в линию (горизонтально), чтобы была одинаковая высота. Задаю width 25% , float:left. Вроде работает, но высота остается произвольная. Можно ли ее сделать одинаковой без прописывания height? (Фото 1).

2. Верстаю по сетке (12 колонок). Задаю контейнер с определенной шириной. С помощью библиотеки задаю расположение блока на 6 колонок. Но тут загвоздка. Второй блок, картинка, которая не должна входить в контейнер с фиксированной шириной. И ее нужно расположить справа от уже размеченного блока. Как это правильно сделать? Может есть такие примеры ? (Фото 2).

png 1v.png
png 2v.png
LC
На сайте с 29.04.2015
Offline
60
Алашеев Александр
#1

1. Родителю убрать float, прописать display: flex; и дочерние элементы - изображения растянутся по высоте. Но будет не красиво т.к изображения будут растянуты на высоту самого "высокого".

2. Не понятно, что нужно

S
На сайте с 30.09.2016
Offline
469
Sitealert
#2

Делай картинки фоном.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
D
На сайте с 01.02.2016
Offline
38
Devero
#3
LinkerClub:
1. Родителю убрать float, прописать display: flex; и дочерние элементы - изображения растянутся по высоте. Но будет не красиво т.к изображения будут растянуты на высоту самого "высокого".

2. Не понятно, что нужно

1. Я попробовал, спасибо. Применил object-fit: cover, изображения стали адекватными.

2. Второй скришот. Есть 2 блока. Один блок нужно расположить слева по сетке (12 колонок), а второй блок справа, но без сетки (чтобы блок был на всю ширину экрана). И тут я застопорился. Как мне вообще это реализовать?

---------- Добавлено 13.07.2019 в 10:56 ----------

Sitealert:
Делай картинки фоном.

Картинки будут увеличиваться при наведении. Не подойдет.

Карта в блоке локальной Яндекс обновил дизайн контекстных Партнеры РСЯ получили возможность

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий