Как поделить блок на 2 части css
Перейти к содержимому

Как поделить блок на 2 части css

  • автор:

Разбиваем страницу на две равные колонки

Два div’а с абсолютным позиционированием. И что Вы будете делать, если ниже этих колонок, имеющих произвольную и заренее неизвестную высоту, необходимо будет вывести подвал?

Никита :
Отберите у школьников права на публикацию.
Administrator :
Школьников среди авторов нет.
Administrator :

Друзья, данный сниппет, впрочем как и другие, является одним из вариантов разбивки страницы на две равные колонки, поэтому не стоит его рассматривать как единственно верный. Существует 1000 и 1 способ разбить страницу или блок на колонки, равные по ширине/высоте. И ни про один из этих многочисленных способов нельзя сказать, что он будет единственно правильным, который должен применяться всеми. Поэтому данный сниппет можно применить не только к странице в целом, но и к отдельному блоку, а также в совокупности с другими приемами разметки страницы.

Так или иначе этот способ является наиболее неоптимальным.

Интересно а как разделить страницу на две разноцветные части по 50% но по горизонтали? Т.е. когда первая часть расположена над второй.

SelenIT :

Если нужно разделить видимую область на две половины по вертикали, то проще всего использовать единицу vh (min-height: 50vh). Либо стандартный вариант с html, body и контейнерами c min-height: 50%.

Александр :

Как сделать так чтобы слева формировались обьявления на покупку,а справа на продажу? Есть возможность переделать вышеописанный скрипт под это?

Разбить один 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.3k 87 87 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков

ответ дан 29 июн 2014 в 14:29

27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

Как разделить блок div на две части?

Здравствуйте! Подскажите пожалуйста, как мне разделить блок на две части, но при этом, чтобы они были в общем блоке? 1-я часть картика + описание черным текстом, а 2-я часть должна быть только с описанием зеленого текста.

Я имею ввиду, у меня есть описание черным текстом и оно от картинки имеет отступ и при этом по всей высоте идет ровно. Так вот как сделать отступ зеленого текста от черного и чтобы зеленый текст шел так же ровно по всей высоте как черный.

Извините за то, что криво объяснил, по другому не знаю как объяснить =( Я приложил скриншот на котором нарисовал разделение. Но мне нужно чтобы самой полоски разделения в блоке не было видно. Нужно чтобы зеленый текст был за черной полосой , но при этом этой полосы не было видно — как-то так

5eabd99a95c51097286519.png

  • Вопрос задан более трёх лет назад
  • 3972 просмотра

2 комментария

Простой 2 комментария

Разделить блок надвое, css?

e4158e377ad243649310e8a99f17d3f6.png

Добрый день! Имею следующий вопрос.
Нужно разделить блок надвое, не было бы проблемой если бы это был только бэкграунд, но в блоке есть еще кнопки и другие элементы, то есть, вместе со всеми элементами нужно разделить блок или целую страницу на двое. Желательно только css/sass. Нужно для css анимации
Пример
Буду благодарен за любые варианты, идеи!

  • Вопрос задан более трёх лет назад
  • 6517 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 3

Создайте два идентичных блока и наложите их друг на друга (один скройте),
при наведении отобразите оба и раздвиньте их на нужное расстояние,
при этом их содержимое сдвиньте на 50% в нужном направление и через overflow закройте торчащие части.

Ответ написан более трёх лет назад

Нравится 2 1 комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *