Задать вопрос
BenderIsGreat34
@BenderIsGreat34
junior front-end
html

Как можно переделать раздел с работами?

Сверстал это всё таким образом
Вот как выглядит это в макете 5d66b0090add5315841147.png
Отправил на проверку, но прислали вот такое замечание:
Как-то странно сделан раздел с работам, все
элементы в одной колонке и по левому краю с пустотами по бокам.

Не совсем понимаю, как это можно сделать по другому. Я указал контейнер на всю ширину экрана, при уменьшении экрана картинка переходит на следующую строку, если экран больше чем ширина экрана на макете, то картинки разумеется встают не ровно в 2 полных ряда, а в 2 неполных ряда. Что я делаю не так?
  • Вопрос задан
  • 46 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
делаем ряды, которые переключаются следующим образом:

6x2
4x3
3x4
2x6

в промежутках ячейки пропорционально изменяют размеры для заполнения всей полосы.

Получаем всегда заполненные полностью ряды. С одним примечанием, что кол-во работ должно быть кратным 12-и.

Но вообще-то этот вопрос следовало задать тому, кому вы делаете этот макет. Кто знает, что у него на уме.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
kasheibess
@kasheibess
веб уже не тот
В общем вот моё решение https://codepen.io/login2030/pen/PoYjqRR?editors=1100
Что получается - убираем атрибуты бутстрапа со списка,
.container-fluid
        .row
            .col-lg-12.no-padding

Оставляем просто див.

Дополнительно оборачиваем картинку внутри элемента списка в див, чтобы адекватно считала пропорция.

Ну и css хак
.our-works__list-examples li img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}
.our-works__list-examples li div {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 100%;
}
.our-works__list-examples li {
  width: 10%;
}


Если хочешь изменить число работ в ряду, то просто 100% дели на желаемое количество работ и получишь ровный ряд. Например 100 / 8 = 12.5% будет ширина li
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Исследовать рынок, выстроить маркетинговую стратегию
04 мая 2024, в 23:31
1000 руб./в час
Дизайнер в IT компанию
04 мая 2024, в 23:17
1200 руб./в час
Установка OS debian 11, raid 5, raid 0
04 мая 2024, в 22:32
2000 руб./за проект
Ещё заказы