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

StackOverflow https://stackoverflow.com/questions/4607500

  •  25-09-2019
  •  | 
  •  

Вопрос

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

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

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

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

Это было полезно?

Решение

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

Видеть: CSS - равные роста столбцы? Для руководства по столбцам равных высот.

Другие советы

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top