Как сделать адаптивную высоту блоков?
273
15 мая 2018, 18:50
Поделитесь, пожалуйста, как адаптировать высоту под ширину? Если менять разрешение, то между элементами в блоке появляются огромные паддинги или же вообще наезжают друг на друга. Как это можно решить? И помогает ли в таком случае функция calc?
Answer 1
Используйте padding-bottom
Как-то так:
.content {
width: 150px;
margin:0 auto;
}
.wrap-block {
height:0;
padding-bottom:100%;
position:relative;
}
.inner-block {
position:absolute;
width:100%;
height:100%;
background:#f0f;
}<div class="content">
<div class="wrap-block">
<div class="inner-block">
inner
</div>
</div>
</div>Answer 2
Можно указать отступ в rem, он будет расчитвать относительно размера шрифта (а размер шрифта то при адаптации вы меняете).
Так же можно использовать bootstrap v4.1. Там есть классы типо pb-md-3, pb-sm-3, pb-3.
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50301 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31941 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26277 visits
- Как через css изменить цвет png изображения? 11765 visits
- Blob video url download 11312 visits
- Php curl запрос через прокси с авторизацией 10721 visits
- Работа с captcha vk api 9517 visits
© "hostciti.net" 18.3.2026 | 16:12