Задать вопрос
Filgavrilov
@Filgavrilov
html

Почему слетают дивы при сжатии окна?

https://jsfiddle.net/brjhb3ew/3/

Имеется галерея с плавающей шириной - контейнер.
В ней есть дивы c margin 10px, ширина дивов задана в процентах, за вычетом отступов - 48%.

При сжатии страницы, дивы не сжимаются пропорционально контейнеру, а слетают вниз.
Если убрать margin, и назначить ширну 50% - всё нормально сжимается...

Почему так? Как сделать правильно?
  • Вопрос задан
  • 174 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Правильно использовать calc:

.project-preview {
    width: calc(50% - 20px);
    margin: 10px;
    ...
}


caniuse.com/#search=calc — поддерживается от IE9 и выше.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@semki096
правильно сделано например в бутстрапе - смотрите разметку, там отступ в пикселях компенсируется отрицательным отступом строки. в других фреймворках - нет отступов в пикселях а только в процентах - что тоже создаёт чёткую разметку.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать вебпроект со стеком: yii2, jquery, vue
19 апр. 2024, в 13:06
6000 руб./за проект
Правки и доработки CRM системы PHP, JS, Smarty,
19 апр. 2024, в 13:03
1500 руб./в час
Доработка сайта на Yii 2.0
19 апр. 2024, в 13:00
999 руб./за проект
Ещё заказы