水平图像之间的响应背景线

Question

I have 4 divs as below

 .bxsection { width: 100%; height: auto; float: left; }.sng { float: left; margin: 0px;important: margin-right; 0px:important; max-width. 25%: };workbox { text-align. center: };sectionboximg { text-align: center; width: 90px; height: 90px; display: inline-block; border-radius: 57px; border: solid 1px #777777; overflow: hidden; padding. 15px: };sectionboximg img { width: 100%; height: 100%; opacity: 80%; vertical-align: middle; border-style. none: }:sectionboximg img:;after { width: 130px; height: 2px; background-color: #e6e6e6; content: ""; position: absolute; display: block; right: -65px; top: 45px; border-bottom: 1px solid #e6e6e6; z-index: 0; }

 <div class="bxsection"> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_1 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_2 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_3 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_4 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> </div>

The issue which i am facing is that the width of the lines are given in px (130px) which will have issues with responsive design. What i need is 1. the lines should be aligned to back of the circular images. 2. the width of the lines must responsively adjust so that at higher or lower resolutions we should not see any gaps between the circle and line

sample image

Answer 1

There are two methods to solve this problem,

• First one is that you can make one big line which is behind the circle with the help of absolute positioning and z-index and has a width defined in % units. The lines will be visible inside circle only if nothing is inside is(no image or color fill is in it) but hey, you are gonna fill image I guess inside it.

• Second is you can use the calc() function CSS provides which will determine the length of line dynamically. Read about it more on this page: https://developer.mozilla.org/en/docs/Web/CSS/calc

I used the first method and here's the code

HTML Code

<div class="bxsection">
  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_1 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>

  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_2 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_3 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_4 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>
  <div class="temporary"></div>
</div>

CSS Code

.bxsection {
  width: 100%;
  height: auto;
  float: left;
}

.sng {
  float: left;
  margin: 0px !important;
  margin-right: 0px !important;
  max-width: 25%;
}

.workbox {
  text-align: center;
}

.sectionboximg {
   text-align: center;
  width: 90px;
  height: 90px;
  display: inline-block;
  border-radius: 57px;
  border: solid 1px #777777;
  overflow: hidden;
  padding: 15px;
}

.sectionboximg img {
  width: 100%;
  height: 100%;
  opacity: 80%;
  vertical-align: middle;
  border-style: none;
}

.temporary {
  width: 70%;
  height: 2px;
  background-color: #e6e6e6;
  position: absolute;
  display: block;
  left: 15%;
  top: 45px;
  border-bottom: 1px solid #e6e6e6;
  z-index: -1;
}

Answer 2

Here is the solution,

Please run it full screen

The CSS:-

 .bxsection { width: 100%; height: auto; float: left; }.sng { float: left; margin: 0px;important: margin-right; 0px.important: };workbox { text-align: center; margin-right. -25px: };sectionboximg { text-align: center; width: 90px; height: 90px; margin-left: 50px; margin-right: 50px; display: inline-block; border-radius: 57px; border: solid 1px #777777; overflow: hidden; padding. 15px: };sectionboximg img { width: 100%; height: 100%; opacity: 80%; vertical-align: middle; border-style. none: }:sectionboximg img:;after { width: 76px; height: 2px; margin-left: 60px; background-color: #e6e6e6; content: ""; position: absolute; display: block; /* right: -65px; */ top: 65px; border-bottom: 1px solid #e6e6e6; z-index: 0: } @media all and (min-width.1050px) and (max-width:1100px){;workbox { text-align: center; margin-right. -55px: }:sectionboximg img:;after { width: 45px; height: 2px; margin-left: 60px; background-color: #e6e6e6; content: ""; position: absolute; display: block; /* right: -65px; */ top: 65px; border-bottom: 1px solid #e6e6e6; z-index: 0: } } @media all and (min-width.1000px) and (max-width:1049px){;workbox { text-align: center; margin-right. -55px: }:sectionboximg img:;after { width: 40px; height: 2px; margin-left: 60px; background-color: #e6e6e6; content: ""; position: absolute; display: block; /* right: -65px; */ top: 65px; border-bottom: 1px solid #e6e6e6; z-index: 0; } } Your HTML CODE:-

 <div class="bxsection"> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_1 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_2 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_3 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> <div class="col-md-2 col-sm-4 col-xs-12 sng"> <div class="sectionbox workbox"> <div class=sectionboximg img_4 "> <img src="<something>" alt=""> </div> <div class="sectionboxhead">sample content</div> </div> </div> </div>