Ненавязчиво вставить вертикальный делитель в макете
-
25-09-2019 - |
Вопрос
Я хочу вставить серый вертикальный делитель, который равномерно разбивает две стороны, чтобы показать логическое разделение. Поскольку содержание на двух сторонах может варьироваться в зависимости от того, что выбирает пользователь, делитель должен соответствовать соответствующим образом - другими словами, не может быть фиксированной высотой.
Кроме того, в идеале этот элемент стиля будет то, что я мог бы условно вставить и удалить. Очевидно, что какая-то дивер дал бы максимизировать контроль.
Вот мой существующий код HTML / CSS:
Решение
Вместо того, чтобы вставлять элемент, я бы посмотрел на укладку двух сторон как колонны равных высоты. Используйте границу - вправо на левой стороне или налево на границу справа, чтобы показать разделение.
Видеть: CSS - равные роста столбцы? Для руководства по столбцам равных высот.
Другие советы
Как насчет применения border-left: 2px solid gray
или border-right: 2px solid gray
к одной из столбцов?