Делим ширину резинового div на три равных части (CSS)
Есть родительский div c относительной шириной. Ширина div зависит от разрешения экрана, т.е., все меняется на разных устройствах.
Нужно поместить в этот div три равные по ширине блока, чтобы они полностью заняли ширину родителя части без остатка.
Решение
Ширину родительского div мы не знаем (она меняется от разрешения к разрешению), значит задать задать фиксированную ширину внутренним блокам нельзя. Оперируем процентами. Проблема в том, что 100% на 3 без остатка не делится.
.item
item < width: calc(100%/3); >
Просто и изящно. Ширина внутренних блоков будет автоматически рассчитываться в зависимости от ширины родителя.
Разделить блок надвое, css?
Добрый день! Имею следующий вопрос.
Нужно разделить блок надвое, не было бы проблемой если бы это был только бэкграунд, но в блоке есть еще кнопки и другие элементы, то есть, вместе со всеми элементами нужно разделить блок или целую страницу на двое. Желательно только css/sass. Нужно для css анимации
Пример
Буду благодарен за любые варианты, идеи!
- Вопрос задан более трёх лет назад
- 6481 просмотр
Комментировать
Решения вопроса 0
Ответы на вопрос 3
Создайте два идентичных блока и наложите их друг на друга (один скройте),
при наведении отобразите оба и раздвиньте их на нужное расстояние,
при этом их содержимое сдвиньте на 50% в нужном направление и через overflow закройте торчащие части.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Разбить один div на 2 колонки. не получается выполнить разметку
У меня на странице есть div. Этот div надо разбить на две колонки: колонка1 с шириной 70% колонка2 с шириной 30% Мои проблемы с высотой. Высота колонок может быть любой. Также, ширина колонок можно задаваться только в процентах. Раньше у меня было это сделано на основе таблиц, то сейчас вроде используют css: position, float. Реализовать такое решение у меня не получается 🙁 Вот изображение: http://s020.radikal.ru/i709/1406/c3/2f9021202ede.png
Отслеживать
задан 29 июн 2014 в 14:11
alexanderdronov alexanderdronov
147 1 1 золотой знак 1 1 серебряный знак 7 7 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
div1 div2 .div1 < width: 70%; min-height: 150px; background: #ccc; float: left; >.div2 < width: 30%; min-height: 150px; background: #c00; margin-left: 70%; >.footer
Отслеживать
51.4k 86 86 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков
ответ дан 29 июн 2014 в 14:29
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
Как разделить экран пополам
Здесь вы узнаете, как разделить экран пополам (50/50) при помощи CSS.
Как разделить экран
Шаг 1) Добавляем HTML:
Юлия Иванова
Какой-то текст.
Федор Петров
Здесь тоже какой-то текст.
Шаг 2) Добавляем CSS:
/* Разделяем экран пополам */ .split < height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; >/* Контролируем левую половину */ .left < left: 0; background-color: #111; >/* Контролируем правую половину */ .right < right: 0; background-color: red; >/* Если нужно, чтобы контент был выровнен по центру горизонтально и вертикально */ .centered < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; >/* Стили изображения внутри отцентрированного контейнера */ .centered img