CODEWITHSUNDEEP
htmlcss
Geoff_S
Geoff_S

Reputation: 5107

Css for vertical line between divs

I'm using vue (html syntax) to create divs for a comments chain, basically where multiple comments exist and a way to stylistically chain them all together in their own container.

I currently have a nice little layout where I've created a stroked circle to the left of each comment which is a good step, but what I want to do is find a way to create a solid or dotted line that runs vertically between the circle artifacts to complete the idea of chaining them together.

Here's what I have and a small doodle to represent what I want:

enter image description here

Posting my code below. What is a good way to achieve this (assuming I'm not worried about mobile responsiveness, as I'll probably nix the chain completely on mobile)?

<div  class="commentsChainContainer">

<div  class="commentsChain" style="display:flex; flex:1; flex-direction:row; align-items: center; align-content: center; margin-bottom:45px;">
  <div class="commentArtifact"></div>
  <div class="singleComment" style="padding-left:20px;">
    <div class="commentAuthorBox" style="display: flex; flex:1; flex-direction: row; align-items: center; align-content: center;">
      <p class="commentAuthor firstLastNames" style="font-size:20px;">Comment by John Doe</p>
    </div>
    <div class="commentTextBox" style="margin-top:20px;">
      <p class="commentText">Here's a comment</p>
    </div>
  </div>
</div>

<hr>

<div  class="commentsChain" style="display:flex; flex:1; flex-direction:row; align-items: center; align-content: center; margin-bottom:45px;">
  <div class="commentArtifact"></div>
  <div class="singleComment" style="padding-left:20px;">
    <div class="commentAuthorBox" style="display: flex; flex:1; flex-direction: row; align-items: center; align-content: center;">
      <p class="commentAuthor firstLastNames" style="font-size:20px;">Comment by John Doe</p>
    </div>
    <div class="commentTextBox" style="margin-top:20px;">
      <p class="commentText">Here's a comment</p>
    </div>
  </div>
</div>

<hr>

</div>

<style type="text/css">
  .commentArtifact{
  background-color:#fff;
    border:1px solid #cccccc;    
    height:30px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:30px;
}
</style>

Upvotes: 3

Views: 1605

Answers (1)

DrMoney
DrMoney

Reputation: 355

This was a great question, I really had to think about how to achieve this. I made a quick code pen of it because I wasn't exactly sure myself.

https://codepen.io/sean-mooney/pen/Jjdqevm

Basically I found the easiest solution was to create separate elements that spanned half the elements height and then set the position to absolute. Then I messed with the top and left values to line it up within the O. Obviously you would replace your icon with the O. And also be sure that your container is set to position: relative; or any absolute positioned elements will read top/left values as for the whole page or the next parent element that is positioned absolute.

<div class="comment-container">
  <div class="chain chain-top"></div>
  <div class="comment-icon">O</div>
  <div class="comment">Hi</div>
  <div class="chain chain-bottom"></div>
</div>

Once the elements were lined up, I used border-left: 1px DASHED gray to get the desired dashed-chain you were looking for. It looks a little weird where the elements intersect but I think with a little bit of tweaking you can get it how you like. But the overall principal should be same.

Hope this helps!

Upvotes: 2

Related Questions