Vertical line between Ivs

Question

Is it possible to make a Vertical line between Divs? wanted to create a tab for the data. Below is an example of the code I am using:

<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>

I want a line between them I’ve tried to put on the property of the div in the Style border-left, but it didn’t even roll...

Answer 1

It seems your doubt is more focused on CSS (Style) than the languages defined in tags. See, to put a vertical line between the divs just you by, as mentioned, a border-left in the rightmost element that would already solve the problem.

Your code would look like this:

<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>

See that it was added inside the style property of the second div the following style: border-left:1px solid #666.

Another approach would be to use the Flexbox. See how you’d look in this codepen.

abs.

Answer 2

This can also be used if you want to place as a separate element:

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

You can modify the size to get the desired size.

It also works:

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

You can of course just put the tag <hr>which is a horizontal line and turn 90º in CSS:

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

<hr>

Again you can change the width to stay the desired size too.