Inserir discreto vertical discretamente no layout
-
25-09-2019 - |
Pergunta
Quero inserir um divisor vertical cinza que divide os dois lados uniformemente para mostrar uma divisão lógica. Como o conteúdo dos dois lados pode variar em altura, dependendo do que o usuário seleciona, o divisor precisa escalar adequadamente - em outras palavras, não pode ser altura fixa.
Como um aparte, idealmente esse elemento de estilo seria algo que eu poderia inserir e remover condicionalmente. Obviamente, algum tipo de div daria o máximo de controle.
Aqui está o meu código HTML/CSS existente:
Solução
Em vez de inserir um elemento, eu examinaria o estilo dos dois lados como colunas de altura igual. Use uma direita na fronteira no lado esquerdo ou na esquerda à direita, para mostrar a divisão.
Ver: CSS - Colunas de altura igual? Para orientações sobre colunas de altura igual.
Outras dicas
Que tal você se inscrever border-left: 2px solid gray
ou border-right: 2px solid gray
para uma das colunas?