Ненавязчиво вставьте вертикальный разделитель в макет

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

Кстати, в идеале этот элемент стиля можно было бы вставлять и удалять условно. Очевидно, что какой-то div даст максимальный контроль.

Вот мой существующий код HTML / CSS:

http://jsfiddle.net/keruilin/u5GgT/47/


person keruilin    schedule 05.01.2011    source источник
comment
Какой DIV может меняться по высоте?   -  person Pekka    schedule 05.01.2011


Ответы (2)


Вместо того, чтобы вставлять элемент, я бы предпочел стилизовать две стороны как столбцы одинаковой высоты. Используйте border-right с левой стороны или border-left справа, чтобы показать разделение.

См .: CSS - столбцы одинаковой высоты? для получения рекомендаций по столбцам одинаковой высоты.

person Paul Roub    schedule 05.01.2011

Как насчет того, чтобы применить border-left: 2px solid gray или border-right: 2px solid gray к одному из столбцов?

person JakeParis    schedule 05.01.2011