1

É possível fazer uma linha Vertical entre DIVs? queria criar um separador para os dados. Abaixo um exemplo do código que estou utilizando:

<div style="float:left; max-width:200px;max-height:200px;" class="text-center">
     <b>Telefone</b><br />
     @Html.DisplayFor(modelItem => item.Telefone)
</div>
<div style="float:left; max-width:200px;max-height:200px;margin-left:10px;" class="text-center">
     <b>Celular</b><br />
     @Html.DisplayFor(modelItem => item.Celular)
</div>

Quero uma linha vergical entre elas já tentei por na propriedade da div no Style o border-left, mas nem rolou...

2 Respostas 2

3

Isto também pode ser utilizado caso queira colocar como um elemento separado:

<hr width="1" size="100">

Você pode modificar o size para ficar do tamanho desejado.

Funciona também:

<hr style=" transform: rotate(90deg); width: 100px; ">

Você pode claro colocar apenas a tag <hr>que é uma linha horizontal e virar 90º no CSS:

hr {
  transform: rotate(90deg);
  width: 100px;
}
<hr>

Novamente pode alterar o width para ficar do tamanho desejado também.

1
  • obrigado :) funcionou aqui Commented 14/11/2016 às 20:00
3

Ao que parece sua dúvida está mais voltada ao CSS (Estilo) do que as linguagens definidas nas tags. Veja, para por uma linha vertical entre as divs basta você por, como mencionou, um border-left no elemento mais à direita que já resolveria o problema.

Seu código ficaria assim:

<div style="float:left; max-width:200px;max-height:200px;" class="text-center">
     <b>Telefone</b><br />
     @Html.DisplayFor(modelItem => item.Telefone)
</div>
<div style="float:left; max-width:200px;max-height:200px;margin-left:10px; border-left:1px solid #666" class="text-center">
     <b>Celular</b><br />
     @Html.DisplayFor(modelItem => item.Celular)
</div>

Veja que foi adicionado dentro da propriedade style da segunda div o seguinte estilo: border-left:1px solid #666.

Uma outra abordagem seria usar o Flexbox. Veja como ficaria nessa codepen.

abs.

1
  • Obrigado @CleitonPereira Commented 14/11/2016 às 20:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .