Bhavin Shah Bhavin Shah - 4 months ago 8
CSS Question

CSS - put hr next to div

#circle_text_div{

width: 90%;
margin: 0 auto;
height: 90%;
// border: thin red solid;
margin-top:0.5%;
}


.circle_text{
width: 20%;
height: 50%;
border: thin red solid;
position: relative;
top:30%;
float: left;
}

.circle_text:after{
content: "";
height: 2px;
background: black;
position: absolute;
width: 100%;
top: 30%;
}





<div id="circle_text">
<div class="circle_text"></div>
<div class="circle_text"></div>
<div class="circle_text"></div>
</div>


I want
hr
to be after
circle_text
that is a red bordered div then hr then again red bordered div then hr then again red bordered div. that is 3 div(s) and 2 hr among them.

enter image description here

Thank you.

Any help would be grateful.

Answer

<hr> is for seperating content with a horizontal line, that is always 100% width.

You can achieve this by creating a flexbox structure that shrinks and grows divs.

.wrapper {
  display:flex;
}

.text {
  flex-shrink:1;
  flex-grow:0;
}

.seperator {
  flex-grow:1;
  flex-shrink:0;
}
<div class="wrapper">
  <div class="text">hi</div>
  <div class="seperator"><hr></div>
  <div class="text">hi</div>
  <div class="seperator"><hr></div>
  <div class="text">hi</div>
</div>