Статья №102
![Делим ширину резинового div на три равных части (CSS)](/uploads/images/Oldpost/190225110228/1551092548_H3.jpg)
Задача
Есть родительский div c относительной шириной. Ширина div зависит от разрешения экрана, т.е., все меняется на разных устройствах.
Нужно поместить в этот div три равные по ширине блока, чтобы они полностью заняли ширину родителя части без остатка.
<div id="parent"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
Решение
Ширину родительского div мы не знаем (она меняется от разрешения к разрешению), значит задать задать фиксированную ширину внутренним блокам нельзя. Оперируем процентами. Проблема в том, что 100% на 3 без остатка не делится.
Вариант
.item { width: 33.333%; }
отметаем, убого.
Правильно:
item { width: calc(100%/3); }
Просто и изящно. Ширина внутренних блоков будет автоматически рассчитываться в зависимости от ширины родителя.
РАЗВЕРНУТЬ СТАТЬИ ПО ТЕМЕ
- Веб-разработка
Сначала подготовить контент, потом делать сайт [узнай почему]
19109 1 - Веб-разработка
Что такое жизненный цикл сайта и как его увеличить
10689 0 - Веб-разработка
Вот вам 3 коротких совета, если вы решили обновить сайт
2955 0 - Веб-разработка
Сколько стоит создать сайт в 2024 году?
5091 0
Д
е
й
с
т
в
у
й
!
Оставьте ваши контакты и мы ответим в течение 10 минут.
Ваша заявка принята!
Рассылка Reconcept, подпишитесь на наш полезный блог
Ваша заявка принята!
Комментарии (2)
Оставьте ваш комментарий